使用CSS定位瀑布流简单的实现代码

来源：动视网责编：小采时间：2020-11-27 18:52:29

使用CSS定位瀑布流简单的实现代码

使用CSS定位瀑布流简单的实现代码:这篇文章介绍使用CSS定位瀑布流简单的实现代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

推荐度：

点击下载本文 文档为doc格式

导读使用CSS定位瀑布流简单的实现代码:这篇文章介绍使用CSS定位瀑布流简单的实现代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

这篇文章介绍使用CSS定位瀑布流简单的实现代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title>简单CSS定位瀑布流实现方法</title>
<style type="text/css">
/* 
 * @name: 
 * @time: 2016-12-07
 * @author: wht
*/
body , html {
 height: 100%;
}
/* basic */
body { background:#f9f9f9; margin:0 auto; font:12px/24px tahoma, Helvetica, Arial; text-align:center; }
body,iframe,div,p,h1,h2,h3,h4,h5,h6,fieldset,ul,dl,dt,dd,form,input,button,textarea,select,i { margin:0px; padding:0px; font-weight:normal; }
ul { list-style:none; overflow:hidden; }
img { border:none; }

/* content */
.content {margin:10px auto; }

/* case-list */
.case-list { margin:0 auto; }
.case-list li { display:block; position:absolute;padding:5px 0; border:1px solid #ddd;border-radius:5px; background-color:#fff;}
.case-list li img { display:block;border-radius:5px;margin-left:5px; }
</style>
</head>

<body>

<!-- content -->
<div class="content" id="content">
 <ul class="case-list" id="case-list">
 <li><img src="1.jpg" alt="" /></li>
 <li><img src="2.jpg" alt="" /></li>
 <li><img src="3.jpg" alt="" /></li>
 <li><img src="4.jpg" alt="" /></li>
 <li><img src="5.jpg" alt="" /></li>
 <li><img src="5.jpg" alt="" /></li>
 <li><img src="7.jpg" alt="" /></li>
 <li><img src="8.jpg" alt="" /></li>
 <li><img src="9.jpg" alt="" /></li>
 <li><img src="10.jpg" alt="" /></li>
 <li><img src="11.jpg" alt="" /></li>
 <li><img src="12.jpg" alt="" /></li>
 <li><img src="13.jpg" alt="" /></li>
 <li><img src="14.jpg" alt="" /></li>
 <li><img src="15.jpg" alt="" /></li>
 <li><img src="16.jpg" alt="" /></li>
 <li><img src="17.jpg" alt="" /></li>
 <li><img src="18.jpg" alt="" /></li>
 <li><img src="19.jpg" alt="" /></li>
 <li><img src="20.jpg" alt="" /></li>
 </ul>
</div>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">
window.onload = function(){

 var windowW=$(window).width();
 //console.log(windowW);
 var imgW=$("#case-list li>img").width();
 var hNum=parseInt(windowW/imgW);
 var cases = $("#case-list li");
 var case_h = new Array();
 
 for(var j=0;j<hNum;j++){ 
 case_h[j] = new Array();
 }
 

 $.each(cases, function(i){
 
 var hNum=parseInt(windowW/imgW); 
 var m = i%hNum;

 case_h[m].push(cases.eq(i).height());
 var step = Math.floor(i/hNum); 
 cases.eq(i).css("left", (imgW + 10)*m+"px");
 // console.log(step);
 if(!step){
 cases.eq(i).css("top", "0");
 }else{ 
 var num = 0;
 for(var n = 0; n<step;n++){ 
 num += case_h[m][n] + 20;
 } 
 cases.eq(i).css("top", num+"px"); 
 
 }
 });
}
</script>
</body>
</html>

使用CSS定位瀑布流简单的实现代码

推荐度：

点击下载本文 文档为doc格式

标签：定位实现简单的

热门焦点

使用CSS定位瀑布流简单的实现代码

使用CSS定位瀑布流简单的实现代码

使用CSS定位瀑布流简单的实现代码

最新推荐

猜你喜欢

热门推荐