首先來說一下瀑布流的原理吧：瀑布流是許多資料塊組成的，可以是，可以是div，但是它們都有乙個特點，就是等寬不等高，正是因為它等寬不等高，所以如果按部就班的排布的話，才會出現很大的縫隙，特別不好看，說白了瀑布流布局就是充分利用之間的空隙來合理的布局，使布局看起來好看。
首先上css布局（因為個人喜歡比較美的事物，所以寫的比較多……嘿）
*
.container
.container .box
.container .box .active
.container .box img
.container .box h2
.container .box p
在明白了瀑布流的原理之後現在我們來實現瀑布流及自動載入；首先我們需要平鋪第一行，這裡我們鋪了六張，然後就該鋪第二行了，那這個待插入的應該放在哪個位置呢，我們可以得到每一列的高度，也就是每一列的資料塊的高度加起來，得到六個高度的數值，我們算出哪一列高度最小就把待插入的插入到那一列的正下方，利用絕對定位定位過去（因為是絕對定位，所以top是距離頁面頂部高度），left就是第幾列乘以資料塊寬度就可以了，如下圖，待插入應該插入到這裡
}//監聽滾動條事件
window.onscroll=function()
wate***ll('container', 'box');}}
} function wate***ll(content,box) else
}}
//返回所有的box盒子
function getbyclass(content, cname)
}return boxarr;
} //獲取陣列中最小值的下標值
function getminhindex(arr, val)
}}
//定義函式檢測是否具備了滾動載入資料塊的條件
function checkscrollslide()
**不複雜，多看幾遍多敲幾遍就能理解，這裡主要講解一下最後「function checkscrollslide()」的思想；因為我們這個要實現一直滑一直滑的效果（也就是懶載入），所以我們這裡就拿最後一張來做對比，通俗理解函式「checkscrollslide()」的作用就是最後一張露出一半了你就應該載入。然後之前的「wate***ll」函式裡面的**實現了頁面縮小的列數也會相應的改變哦～
這樣我們乙個基本的瀑布流式布局就完成辣～ ！
但是把頁面重新恢復之後會擠在一起，這個問題觸及到了我的知識盲區，所以如果有懂的小夥伴可以一起交流哦。
（碼字不易，能幫到看這篇文章的你就是我前進的動力，嘿咻
( •̀ ω •́ )✧）
實現瀑布流式布局的幾種方法
1 傳統多列浮動 定義多個div左浮動成多列，在每個div裡插入一推也是左浮動的div。於是就實現了那種參差不齊的效果。2 直接用css3樣式實現 定義乙個div直接設定它的屬性 column count 列數 把那些小塊div放在這個大的div中就能實現這種瀑布流效果。但這種css3屬性在一些低階...
布局管理 流式布局
2007 11 16 14 18 使用流式布局管理器時，gui元件將按照新增入容器的順序自左而右排列在一行上，如果一行空間不足，則另起一行。預設情況下，元件是劇中排列的。可以通過改變面板的預設布局管理器來改變元件在每一行上的排列位置。語句示例如下 flowlayout fl new flowlayo...
網頁布局流式布局
工具所用到外掛程式 masonry 是 一款非常強大的jquery動態網格布局外掛程式，可以幫助開發人員快速開發類似剪貼畫的介面效果。和css中float的效果不太一樣的地方在 於，float先水平排列，然後再垂直排列，使用masonry則垂直排列元素，然後將下乙個元素放置到網格中的下乙個開發區域。...