+
最近今天一直在看瀑布流的帖子，发现很多帖子实现的方法都不一样，这让我这个菜鸟很懵逼，
我在众多帖子中找出一份比较好的，相对比较容易理解的
demo
首先，写HTML的框架
html
12345678910111213141516171819 |
<body> <ul id="box"> <li><img src="img/16.png"></li> <li><img src="img/16.png"></li> <li><img src="img/16.png"></li> <li><img src="img/16.png"></li> <li><img src="img/16.png"></li> <li><img src="img/16.png"></li> <li><img src="img/16.png"></li> <li><img src="img/16.png"></li> <li><img src="img/16.png"></li> <li><img src="img/16.png"></li> <li><img src="img/16.png"></li> <li><img src="img/16.png"></li> <li><img src="img/16.png"></li> <li><img src="img/16.png"></li> <li><img src="img/16.png"></li> </ul></body> |
css布局
1234567891011121314151617 |
ul{ list-style: none; margin:0; padding:0;} position:relative;}#box li{ position: absolute; border:1px solid #ccc; left:0; top:0;}li { transition: all .7s ease-out .1s } |
js部分
12345678910111213141516171819202122232425262728293031323334353637383940 |
<script> var margin = 20; //这里设置间距 var li=$("li"); //这里是区块名称 var li_W = li[0].offsetWidth+margin; //取区块的实际宽度,包含间距 function (){ var h=[]; //记录区块高度的数组 var n = document.documentElement.offsetWidth/li_W|0; //窗口的宽度除以区块宽度就是一行能放几个区块 for(var i = 0;i < li.length;i++) { li_H = li[i].offsetHeight; if(i < n) { //n是一行最多的li，所以小于n就是第一行了 h[i]=li_H; //把每个li放到数组里面 li.eq(i).css("top",0); //第一行的Li的top值为0 li.eq(i).css("left",i * li_W); //第i个li的左坐标就是i*li的宽度 } else{ min_H =Math.min.apply(null,h) ; //取得数组中的最小值，区块中高度值最小的那个 minKey = getarraykey(h,min_H); //最小的值对应的指针 h[minKey] += li_H+margin ; //加上新高度后更新高度值 li.eq(i).css("top",min_H+margin); //先得到高度最小的Li，然后把接下来的li放到它的下面 li.eq(i).css("left",minKey * li_W); //第i个li的左坐标就是i*li的宽度 } } } /* 使用for in运算返回数组中某一值的对应项数(比如算出最小的高度值是数组里面的第几个) */ function getarraykey(s, v) { for(k in s) { if(s[k] == v) { return k; } } } /*这里一定要用onload，因为图片不加载完就不知道高度值*/ window.onload = function() { pull(); } /*浏览器窗口改变时也运行函数*/ window.onresize = function() { pull(); }</script> |
原文:大专栏 Jquery瀑布流