jQuery實現動態瀑布流布局效果

今天在tumblr上看到其瀑布流布局，如下圖，覺得很有意思便研究了下，發現tumblr使用position:absolute布局的。

結構很簡單，具體請參考底部的例項。

先上全部js**

$(function

() ]
}).items;
var itemwidth = 320;
var itemtpl = $('#tpl .falls-item');
var promisearr = ;
var colcount = math.floor((window.innerwidth - 17) / 320);
var coltop = ; //每一列最後的高度值
for (var i = 0; i < colcount; i++) 
console.log(colcount);
data.foreach(function
(val, index) );
var dtd = $.deferred();
promisearr.push(dtd);
var prev = new
date().gettime();
settimeout(function
() );
console.log(new
date().gettime() - prev);
settimeout(dtd.resolve, 850);
}, 300)
//插入後更新最後高度值
coltop[colindex] += $(item).height();
});var imgs = $('.list-container img[data-lazy-load]');
() );
$(window).trigger('scroll');
})

var data = mock.mock(]

}).items;

var itemwidth = 320;//這裡的列寬我們預設為320px，否則不好控制。

var colcount = math.floor((window.innerwidth - 17) / 320); //計算列數，減去17是減去滾動條的寬度
var promisearr = ; 為每個動畫元素生成promise，在動畫執行完畢時，可以通知我們。

var colindex = (index % colcount); //計算出列索引，這裡用取餘的方式

var itemleft = colindex * itemwidth; //列數index * 寬度 = left值
var itemtop = coltop[colindex]; //當前列最後的高度值，插入html後，此值將會更新。

jQuery實現瀑布流布局

瀑布流布局要求要進行布置的元素等寬 計算瀏覽器寬度與元素的寬度之比，得到列數 建立陣列，儲存每列元素總高度 each遍歷迴圈各個，判斷是否為第一排，若是，則將元素高度直接加入陣列中，若不是，則定位布置到高度最小的一列，同時更新當前列的總高度。在jquery中，四種寬度 this is a parag...

jQuery實現簡單瀑布流布局

最近正在實習，痛苦的實習日子，不過學到了超多。前幾天剛好在做網頁的瀑布流布局，本來使用的是masonry.js外掛程式，但倒霉的是這個外掛程式對jquery版本有所限制，公司模板使用的是2.1.0，然而mosonry並不理會這的版本的jquery，任性的很。無奈之下，用高版本jquery進行替換，結...

實現瀑布流布局

瀑布流，又稱瀑布流式布局。是比較流行的一種 頁面布局，視覺表現為參差不齊的多欄布局，隨著頁面滾動條向下滾動，這種布局還會不斷載入資料塊並附加至當前尾部，瀑布流的主要特性便是錯落有致，定寬而不定高的設計讓頁面區別於傳統的矩陣式布局模式。主體思路是記錄每一列的高度，父容器相對定位，成員絕對定位，利用to...