尤其受pinterest的煽風點火，瀑布流現在不少人關注。我正好最近比較閒，加上有人曾在我站點提出希望我介紹點瀑布流的東西，所以，今兒個也隨下大流。
pinterest以及上面迅雷UED xwei的瀑布流demo（至少在FireFox下還是有致命的顯示bug的）都是採用的絕對定位實現的，有相對複雜的位置計算。
我一向不喜歡喫別人嚼過的米飯，於是嘗試使用另外的原理實現。我是個流體佈局控，對絕對定位啊、浮動啊什麼的一向沒什麼好感，於是，這裏要介紹的就是基於多欄列表流體佈局實現的瀑布流佈局效果。
大致結構、佈局見下面的手繪圖：
沒有複雜的位置計算，不需要知道里面元素的高度以及寬度，且易理解，關鍵是具體實現~~
demo展示
您可以狠狠地點擊這裏：基於多欄列表瀑布流佈局demo
歡迎各種滾動，縮放等測試。低版本IE瀏覽器也是兼容滴。問題嘛也是有滴，就是滾動到一定位置再F5刷新的時候，部分加載的內容有丟失，需要重新滾動加載。這個嘛，我個人覺得小小demo，沒必要折騰啦（實際上要實現也比較容易，改動如下：每次滾動不是append一個節點，而是連續回調直到加載到屏幕下方。不懂什麼意思？花點功夫看看JS實現原理就會明白了）~~
說說原理
第一次進入的時候，根據瀏覽器寬度以及每列寬度計算出列表個數，然後不管三七二十一，每列先加載個5張圖片再說。
當滾動的時候，對每一列的底部位置做檢測，如果在屏幕中或屏幕上方，則立即append一個新圖片（注意：爲了簡化代碼，提高性能，同時便於演示等，這裏只append了一個）。因爲，滾動時連續的，因此，我們實際看到的效果是圖片不斷load出來。
當瀏覽器寬度改變的時候，頁面上有個id爲waterFallDetect空span標籤，這個標籤作用有兩個：一是實現兩端對齊效果，二是用來檢測瀑布流佈局是否需要刷新。
檢測原理如下：
該span標籤寬度與一個列表寬度一致，當瀏覽器寬度變小的時候，如果小到一定程度，顯然，瀏覽器最右邊的列表就會跑到下一行，把空span擠到後面去，空span發生較大的水平位移，顯然，可以通知腳本，佈局需要刷新；當瀏覽器寬度變大的時候，如果變大的尺寸超過一列的寬度，顯然，這個空span灰跑到第一行去，同樣是發生較大的水平位移，因此，又可以通知腳本刷新瀑布流佈局了。
這個方法的好處是幾乎沒有計算就可以一點不差地知道何時瀑布流佈局需要刷新。這顯然要比設置resize定時器+位置尺寸計算要簡單高性能地多。
滾動時的頁面刷新是基於HTML字符串的處理，而不是更改每個DOM元素的位置（這是絕對定位實現的處理），因此，這裏的效率顯然更高。
總結：基於多欄列表流體佈局瀑布流效果優點
- 簡單：最大限度利用了瀏覽器的流體特性進行佈局，省去了很多計算的麻煩；新人更易懂和上手
- 更好的性能：這個體現在多處，如瀏覽器寬度改變，瀑布流刷新時候的效率等
- 無需知曉尺寸：如果是要絕對定位實現瀑布流，必須知道每個小模塊的高度以及寬度（否則無法定位），而基於列表的佈局則無需知道高寬
無聊時候的折騰，有不足與不準確之處歡迎指正。一些實現的具體細節等也是非常歡迎提問交流的。