本效果的思想**於以下這邊文章：
瀑布流布局主要分為兩部分：
1) 資料塊排列，演算法步驟簡述下:
初始化時，對容器中已有資料塊元素進行第一次計算，需要使用者給定: a，容器元素 — 以此獲取容器總寬度； b，列寬度； 最終列數取的是容器寬度/列寬度；
獲得列數後，需要儲存每個列的當前高度，這樣在新增每個資料塊時，才知道起始高度是多少；
依次取容器中的所有資料塊，先尋找當前高度最小的某列，之後根據列序號，確定資料塊的left，top值，left 為所在列的序號乘以列寬，top 為所在列的當前高度，最後更新所在列的當前高度加上這個資料塊元素的高度，至此，插入乙個元素結束。
原始碼如下：
arrange: function(obj)
options.complete && options.complete(obj);
_this.loading = false;
});}
繫結滾動事件，並確定預載入線高度值，即滾動到哪個高度後，需要去載入資料，其實這個就是列的最小高度值，這樣當前滾動值和最小高度值比較一下即可判斷出來，是否要觸發載入資料；
載入資料，為了不對資料來源做太多限制，完全由使用者自己決定資料來源從哪邊獲取和其格式，這樣更好的方便使用者使用。
原始碼如下：
scrollhandler: function(e)
var flag = hlist[hlist.min()] < (doc.documentelement.scrolltop || doc.body.scrolltop) + doc.documentelement.clientheight;
if(flag) , function(e) );}}
原生JS實現瀑布流布局
一.瀑布流之準備工作 首先宣告下,為了方便演示和聯絡,我使用的是本地,如果大家有需要的話可以嘗試著寫下網路的,不過本地和遠端的大致是相同的.那麼我就來簡單介紹下本地的瀑布流效果吧,我們要先準備好 張,當然啦,我們實現的是瀑布流效果,所以最好是高度不相同的,這樣才可以看出來效果,對吧,嘿嘿.二.的準備...
通過原生JS實現瀑布流布局
由於工作需要，花了幾天時間研究瀑布流布局。該布局可以使用原生js jquery 以及css3來實現，目前的工作場景不允許使用css3 主要是ie 所以本文主要針對原生js。一 需要掌握的知識點 document.body 與 document.documentelement的相容性 var html...
js實現瀑布流布局
1.瀑布流的布局，要求布局的元素是等寬的，瀑布流布局的特點就是等寬不等高，然後計算元素的寬度和瀏覽器螢幕寬度的比值，確定出列數 2.建立乙個陣列，這個陣列用於儲存第一行的各個高度 3.計算出這個陣列中最小的元素，接下來的通過定位的方式布局到高度最小的下面，4.最後將這個最小高度進行更新，然後一直迴圈...