響應式佈局頁面之瀑布流佈局淺析

瀑布流式佈局（簡稱瀑布流）最早在網站上應用 Pinterest (貌似是最先使用這種佈局的網站了)，Mark之，蘑菇街，點點網等頁面都採用了這種佈局。那麼什麼是瀑布流呢？瀑布流的好處在哪？

瀑布流，又稱瀑布流式佈局、瀑布牆。是目前比較流行的一種網站頁面佈局方式，視覺表現爲良莠不齊的多欄佈局，隨着瀑布流效果頁面滾動條向下滾動，這種佈局還會不斷加載數據塊並附加至當前尾部。

這種佈局適合於小數據塊，每一個數據塊內容相近且沒有側重。一般，隨着頁面滾動條向下滾動，這種佈局還會不斷加載數據塊並附加至當前尾部。因此，咱們給這樣的佈局起了一個形象的名字 — 瀑布流式佈局。

瀑布流的佈局原理：

這種佈局是基於響應式佈局的。他能夠根據瀏覽器寬度以及每列寬度計算出列表個數。來動態加載圖片。且須要預加載幾張圖片，再當滾動條滾動的時候，對每一列的底部位置作檢測，若是在屏幕中或屏幕上方，則當即append一個新圖片。由於，滾動是連續的，因此，咱們實際看到的效果是圖片不斷load出來。(若是加載的圖片太多最好作好本地緩存)。讓用戶的體驗效果更佳。

瀑布流的實現方法：

方法一：

當瀏覽器寬度改變的時候，頁面上有個id爲waterFallDetect空span標籤，這個標籤做用有兩個：一是實現兩端對齊效果，二是用來檢測瀑布流佈局是否須要刷新。

檢測原理以下：

• 該span標籤寬度與一個列表寬度一致，當瀏覽器寬度變小的時候，若是小到必定程度，顯然，瀏覽器最右邊的列表就會跑到下一行，把空span擠到後面去，空span發生較大的水平位移，顯然，能夠通知腳本，佈局須要刷新；當瀏覽器寬度變大的時候，若是變大的尺寸超過一列的寬度，顯然，這個空span灰跑到第一行去，一樣是發生較大的水平位移，所以，又能夠通知腳本刷新瀑布流佈局了。

• 這個方法的好處是幾乎沒有計算就能夠一點不差地知道什麼時候瀑布流佈局須要刷新。這顯然要比設置resize定時器+位置尺寸計算要簡單高性能地多。

方法2、

漂浮。

各列固定寬度，而且左浮動；

更多數據加載時，直接在其後加入圖片便可。