<p>眾所周知：瀑布流布局是比較流行的一種網(wǎng)站頁面布局，視覺表現(xiàn)為參差不齊的多欄布局，隨著頁面滾動條向下滾動，這種布局還會不斷加載數(shù)據(jù)塊并附加至當前尾部。最早采用此布局的網(wǎng)站是Pinterest，逐漸在國內流行開來。國內大多數(shù)清新站基本為這類風格。</p>
<p>通俗點說：瀑布流布局就是指將一系列參差不齊的目標使其完美的在容器中進行排列。而這個排列又涉及到以下內容：
<ol>
<li>容器的寬度，目標自身的寬度：這兩個可以得知容器的每一排可以放置多少個目標。</li>
<li>目標自身的height：這個決定了下一排的第一個元素應該放在什么位置，第二個又該放置在什么位置；而這正是該布局的難點所在：
1).瀑布流布局的每一排就像一個數(shù)組，而數(shù)組里邊的元素所帶的值應該弄清楚每個值得序號和高度。
2).找出第一排高度最小的值和對應的序號，然后第二排的第一個元素就放在該 序號元素的下邊，以后每一排的序號都不難得出，但是高度卻是每個相同序號元素的高度之和的最小值，以此循環(huán)。
</li>
</ol>
</p>

代碼實現(xiàn)：

function water(){
        var nodeWidth=$('.item').outerWidth(true);//目標的外寬度
        var colNum   =parseInt($(window).width()/nodeWidth);//容器中每一排能放多少個目標
        var colSumHeight = [] ;//創(chuàng)建一個空數(shù)組
        for(var i=0;i<colNum;i++){
            colSumHeight.push(0);
        }//根據(jù)每一排能放多少個目標，遍歷空數(shù)組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();//由于前面是封裝在一個函數(shù)里的，這里只是調用執(zhí)行而已
              
    $(window).on('resize',function(){
                      water();
    })//根據(jù)容器的尺寸排列

綜上這就是瀑布流布局的原理以及實現(xiàn)方式。
本文版權歸饑人谷和作者所有，如需轉載，請注明來源，謝謝！