瀑布流原理

標籤：

瀑布流效果分為兩類：蘑菇街效果（第一種：固定列數）、百度圖片/花瓣網(第二種：隨著視窗的大小列數發生變化 )

涉及到的問題：

1.資料問題（應用的技術：ajax/jsonp）

2.資料載入之後如何顯示在頁面上 ，展現出效果。

第一種：蘑菇街式的固定列數

原理：

一個ul，如果有四列，就是有四個li(浮動定位，寬度提前定義，但是高度沒有定義)，如果一次性的載入10條資料，那麼一次從左至右填充li，填充一屏之後再載入，就尋找最小列填充。

第二種：百度圖片、花瓣網（隨視窗大小列數發生變化）

原理：

頁面中包含一個容器（設定成固定定位），然後所有的圖片都放在這個容器裡面。在圖片進行顯示的時候，是我們要先計算出總的列數，然後根據列數跟每列的寬度計算出容器的總寬度。顯示圖片的時候就是從左往右填充各列，當一屏填充滿了之後，就會尋找最短列，然後
把圖片添加到最短列中。

瀑布流原理