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

代碼實(shí)現(xiàn)：

function water(){
        var nodeWidth=$('.item').outerWidth(true);//目標(biāo)的外寬度
        var colNum   =parseInt($(window).width()/nodeWidth);//容器中每一排能放多少個目標(biāo)
        var colSumHeight = [] ;//創(chuàng)建一個空數(shù)組
        for(var i=0;i<colNum;i++){
            colSumHeight.push(0);
        }//根據(jù)每一排能放多少個目標(biāo)，遍歷空數(shù)組colSumHeight,并把0 push進(jìn)去

//用jq的方法遍歷每一個目標(biāo)，并對比確定序號和MinHeight
        $('.item').each(function(){
            var $cur=$(this);

            var idx=0;//為了便于比較，給序號設(shè)置一個初始值。
            var minSumHeight=colSumHeight[0];//同上
            for(var i=0;i<colSumHeight.length;i++){
                if(colSumHeight[i]<minSumHeight){
                    idx=i;
                    minSumHeight=colSumHeight[i];
                }//對比得出minHeight和對應(yīng)的序號
            }
            $cur.css({
                left:nodeWidth*idx,
                top:minSumHeight
            });//當(dāng)前元素應(yīng)該放置的位置
            colSumHeight[idx]=$cur.outerHeight(true)+colSumHeight[idx];//給第Idx個元素的高度賦值。
        });
        }
        water();//由于前面是封裝在一個函數(shù)里的，這里只是調(diào)用執(zhí)行而已
              
    $(window).on('resize',function(){
                      water();
    })//根據(jù)容器的尺寸排列

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