<p>众所周知：瀑布流布局是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest，逐渐在国内流行开来。国内大多数清新站基本为这类风格。</p>
<p>通俗点说：瀑布流布局就是指将一系列参差不齐的目标使其完美的在容器中进行排列。而这个排列又涉及到以下内容：
<ol>
<li>容器的宽度，目标自身的宽度：这两个可以得知容器的每一排可以放置多少个目标。</li>
<li>目标自身的height：这个决定了下一排的第一个元素应该放在什么位置，第二个又该放置在什么位置；而这正是该布局的难点所在：
1).瀑布流布局的每一排就像一个数组，而数组里边的元素所带的值应该弄清楚每个值得序号和高度。
2).找出第一排高度最小的值和对应的序号，然后第二排的第一个元素就放在该 序号元素的下边，以后每一排的序号都不难得出，但是高度却是每个相同序号元素的高度之和的最小值，以此循环。
</li>
</ol>
</p>

代码实现：

function water(){
        var nodeWidth=$('.item').outerWidth(true);//目标的外宽度
        var colNum   =parseInt($(window).width()/nodeWidth);//容器中每一排能放多少个目标
        var colSumHeight = [] ;//创建一个空数组
        for(var i=0;i<colNum;i++){
            colSumHeight.push(0);
        }//根据每一排能放多少个目标，遍历空数组colSumHeight,并把0 push进去

//用jq的方法遍历每一个目标，并对比确定序号和MinHeight
        $('.item').each(function(){
            var $cur=$(this);

            var idx=0;//为了便于比较，给序号设置一个初始值。
            var minSumHeight=colSumHeight[0];//同上
            for(var i=0;i<colSumHeight.length;i++){
                if(colSumHeight[i]<minSumHeight){
                    idx=i;
                    minSumHeight=colSumHeight[i];
                }//对比得出minHeight和对应的序号
            }
            $cur.css({
                left:nodeWidth*idx,
                top:minSumHeight
            });//当前元素应该放置的位置
            colSumHeight[idx]=$cur.outerHeight(true)+colSumHeight[idx];//给第Idx个元素的高度赋值。
        });
        }
        water();//由于前面是封装在一个函数里的，这里只是调用执行而已
              
    $(window).on('resize',function(){
                      water();
    })//根据容器的尺寸排列

综上这就是瀑布流布局的原理以及实现方式。
本文版权归饥人谷和作者所有，如需转载，请注明来源，谢谢！