jQuery实现瀑布流

瀑布流

<div class="list">
        <div class="box"><img src="img/1.jpg"/></div>
        <div class="box"><img src="img/2.jpg"/></div>
        <div class="box"><img src="img/3.jpg"/></div>
            ......
</div>

<script src="jquery-1.12.4.js"></script>
<script>
$(function(){
  function init(){
    // 获取每个小盒子的宽度 包括margin、padding、border
    var boxWidth=$(".box").outerWidth(true);

    // 获取列数
    // var cols=parseInt($(window).width()/boxWidth);
    var cols = 5;
    var heightArr=[];
    for(var i=0;i<cols;i++){
        heightArr.push(0);        
    };
 
    //遍历每一张图片
    $(".box").each(function(index,box) {
        var idx=0;
        var minBoxHeight=heightArr[0];
        // 获取最小高度
        for(var i=0;i<heightArr.length;i++){
            if(heightArr[i]<minBoxHeight){
                minBoxHeight=heightArr[i];
                idx=i;
                // 获取最小高度的索引
            }
        };
 
        // 设置图片的样式
        $(box).css({
            left:boxWidth*idx,
            top:minBoxHeight
        });
        heightArr[idx]+=$(box).outerHeight(true); 
      });
  };
//异步请求 等数据加载调用函数
init()
}
</script>