<p>眾所周知：瀑布流布局是比較流行的一種網(wǎng)站頁(yè)面布局，視覺(jué)表現(xiàn)為參差不齊的多欄布局借笙，隨著頁(yè)面滾動(dòng)條向下滾動(dòng)储笑，這種布局還會(huì)不斷加載數(shù)據(jù)塊并附加至當(dāng)前尾部孕暇。最早采用此布局的網(wǎng)站是Pinterest炼列，逐漸在國(guó)內(nèi)流行開(kāi)來(lái)只搁。國(guó)內(nèi)大多數(shù)清新站基本為這類風(fēng)格。</p>
<p>通俗點(diǎn)說(shuō)：瀑布流布局就是指將一系列參差不齊的目標(biāo)使其完美的在容器中進(jìn)行排列俭尖。而這個(gè)排列又涉及到以下內(nèi)容：
<ol>
<li>容器的寬度氢惋，目標(biāo)自身的寬度：這兩個(gè)可以得知容器的每一排可以放置多少個(gè)目標(biāo)。</li>
<li>目標(biāo)自身的height：這個(gè)決定了下一排的第一個(gè)元素應(yīng)該放在什么位置稽犁，第二個(gè)又該放置在什么位置焰望；而這正是該布局的難點(diǎn)所在：
1).瀑布流布局的每一排就像一個(gè)數(shù)組，而數(shù)組里邊的元素所帶的值應(yīng)該弄清楚每個(gè)值得序號(hào)和高度已亥。
2).找出第一排高度最小的值和對(duì)應(yīng)的序號(hào)熊赖，然后第二排的第一個(gè)元素就放在該 序號(hào)元素的下邊，以后每一排的序號(hào)都不難得出虑椎，但是高度卻是每個(gè)相同序號(hào)元素的高度之和的最小值震鹉，以此循環(huán)的妖。
</li>
</ol>
</p>
代碼實(shí)現(xiàn)：
function water(){
var nodeWidth=$('.item').outerWidth(true);//目標(biāo)的外寬度
var colNum =parseInt($(window).width()/nodeWidth);//容器中每一排能放多少個(gè)目標(biāo)
var colSumHeight = [] ;//創(chuàng)建一個(gè)空數(shù)組
for(var i=0;i<colNum;i++){
colSumHeight.push(0);
}//根據(jù)每一排能放多少個(gè)目標(biāo)，遍歷空數(shù)組colSumHeight,并把0 push進(jìn)去
//用jq的方法遍歷每一個(gè)目標(biāo)足陨，并對(duì)比確定序號(hào)和MinHeight
$('.item').each(function(){
var $cur=$(this);
var idx=0;//為了便于比較，給序號(hào)設(shè)置一個(gè)初始值娇未。
var minSumHeight=colSumHeight[0];//同上
for(var i=0;i<colSumHeight.length;i++){
if(colSumHeight[i]<minSumHeight){
idx=i;
minSumHeight=colSumHeight[i];
}//對(duì)比得出minHeight和對(duì)應(yīng)的序號(hào)
}
$cur.css({
left:nodeWidth*idx,
top:minSumHeight
});//當(dāng)前元素應(yīng)該放置的位置
colSumHeight[idx]=$cur.outerHeight(true)+colSumHeight[idx];//給第Idx個(gè)元素的高度賦值墨缘。
});
}
water();//由于前面是封裝在一個(gè)函數(shù)里的，這里只是調(diào)用執(zhí)行而已
$(window).on('resize',function(){
water();
})//根據(jù)容器的尺寸排列
綜上這就是瀑布流布局的原理以及實(shí)現(xiàn)方式零抬。
本文版權(quán)歸饑人谷和作者所有镊讼，如需轉(zhuǎn)載，請(qǐng)注明來(lái)源平夜，謝謝蝶棋！
