jquery实现瀑布流

案例效果：

实现步骤如下：

1、确定图片的宽度 - 滚动条宽度
2、用相对定位来确定第一行按序布局
3、用数组来放各列累加的高度，以相对定位来确定其他行的布局。其中top值就是最小列的高度加上间距。

代码如下：

js:

waterFall()
function waterFall(){
     // 1 确定图片的宽度 - 滚动条宽度
   var columns = 3; //3列
   var pageWidth = $('.waterfull-box').width()-columns*20;
   var itemWidth = parseInt(pageWidth/columns); //得到item的宽度
   $(".item").width(itemWidth); //设置到item的宽度
   var arr = [];
   $(".waterfull-box .item").each(function(i){
       var height = $(this).height();
       if (i < columns) {
           // 2 第一行按序布局
           $(this).css({
               top:0,
               left:(itemWidth) * i+20*i,
           });
           //将行高push到数组
           arr.push(height);
       } else {
           // 其他行
           // 3 找到数组中最小高度  和 它的索引
           var minHeight = arr[0];
           var index = 0;
           for (var j = 0; j < arr.length; j++) {
               if (minHeight > arr[j]) {
                   minHeight = arr[j];
                   index = j;
               }
           }
           // 4 设置下一行的第一个盒子位置
           // top值就是最小列的高度
           $(this).css({
               top:arr[index]+30,//设置30的距离
               left:$(".waterfull-box .item").eq(index).css("left")
           });

               // 5 修改最小列的高度
               // 最小列的高度 = 当前自己的高度 + 拼接过来的高度
               arr[index] = arr[index] + height+30;//设置30的距离
           }
       });
 }

html:

<div class="move-box">
     <ul class="waterfull-box">
         <li class="item" style="height: 100px;"></li>
         <li class="item" style="height: 200px;"></li>
         <li class="item" style="height: 150px;"></li>
         <li class="item" style="height: 100px;"></li>
         <li class="item" style="height: 120px;"></li>
         <li class="item" style="height: 100px;"></li>
         <li class="item" style="height: 200px;"></li>
         <li class="item" style="height: 150px;"></li>
         <li class="item" style="height: 100px;"></li>
         <li class="item" style="height: 120px;"></li>
         <li class="item" style="height: 100px;"></li>
         <li class="item" style="height: 200px;"></li>
         <li class="item" style="height: 150px;"></li>
         <li class="item" style="height: 100px;"></li>
         <li class="item" style="height: 120px;"></li>
     </ul>
 </div>   

css:

*{margin: 0;padding: 0;}
.move-box{width: 1000px;height: 600px;border: 2px solid green;border-radius: 10px;overflow: hidden;}
.waterfull-box{position: relative;list-style: none;width: 1000px;}
.item{border-radius: 15px;position: absolute;background: pink;margin: 10px;}