現在圖片網與商城流行一種叫“瀑布流”的布局，我們公司也不小心得了“流行性感冒”，要搞這個。於是我就寫了一個，現在再用我的框架mass重寫一下，發布出來，順便宣傳一下我的框架。
瀑布流其實沒什么東西，就是列布局與無限拖的結合。由於要支持IE6就沒有CSS3，直接對列進行絕對定位。列就是一個DIV。然后就是列中每個板塊的添加問題，我管它為磚頭。每添加一塊磚頭前，比較一下哪列最短，就往哪里塞。最后就是無限拖，太easy了。加之，我的框架對樣式，事件等設置非常簡單，比jQuery更方便。
下面就是源碼，用到了並行加載技術，預設時加載了random,ready,css,event這幾個模塊，它們就會自行加載其依賴模塊了。
require("ready,random,css,event",function($, random){
//容器的CSS表達式，列數，每列的寬度
var Waterfall = function(expr, col, colWidth){
//構建整體輪廓
var container = this.container = $(expr);
var pw = container.width();//容器的寬
var gw = (pw - col * colWidth)/(col-1);//列間距離
this.colWidth = colWidth;
this.cols = [];
for(var i = 0; i < col ; i++){//隨機生成列
this.cols[i] = $("<div class='waterfall' />").css({
position: "absolute",
top: 0,
left: (colWidth + gw) * i,
width: colWidth,
backgroundColor: random.hex()
}).appendTo(container);
}
}
Waterfall.prototype = {
//添加板塊
addBlocks : function(){
for(var i = 0; i < 40; i++){//隨機生成40個板磚
$("<div class='waterfall_block' />").css({
margin: 5,
width: this.colWidth - 10 ,
height: random.num(80, 300),
backgroundColor: random.hex()
}).appendTo( this.whichCol() );
}
},
//計算出最短的欄柵
whichCol:function(el, ret, h){
for(var i = 0, shortest = 0; el = this.cols[i]; i++){
h = el.height();
if(i == 0){
shortest = h;
ret = el;
}
if(h < shortest ){
shortest = h;
ret = el;
}
}
return ret;
}
};
var waterfall = new Waterfall("body",4,300)
waterfall.addBlocks();
$(window).scroll(function(){
var clientHeight = $(window).height(),
scrollTop = $(window).scrollTop(),
scrollHeight = $(document).height();
if(clientHeight + scrollTop >= scrollHeight ){
waterfall.addBlocks();
}
})
})
源碼放於github中。
IE下如果報錯，請它刷新頁面
最后附上微博上對它的評論：Pinterest創造的瀑布流樣式，有幾個預設前提：1、圖片極重要，文字不重要；2、用戶瀏覽無明確目的，對復雜的索引無依賴性；3、圖片整體美觀度較高。因此恰恰適合Pinterest這樣的“好圖挖掘與收藏網站”。最近幾個月國內跟風瀑布流，也太盲目了些。