css瀑布流佈局的幾種實現方式



1、傳統的多列浮動

實現方式

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

· 一列中的數據塊爲一組，列中的每塊依次排列；

· 更多數據加載時，需要分別插入到不同的列中；

 

優點：

· 佈局簡單；
· 不用明確數據塊的高度，自適應即可。

 缺點：

· 列數固定，嵌套較多

· 滾動加載更多數據時，需要指定插入到第幾列中，不方便。

 

2、CSS3樣式定義法

我們將要用到的是CSS3新加的column屬性，通過指定容器的列個數column-count，列間距column-gap，列中間的邊框(間隔邊線)column-rule，列寬度column-width實現。

 

優點：

· 直接用CSS定義，方便快捷，是最好不過了；

· 擴展方便。

 

缺點：

· 目前仍有部分瀏覽器不支持CSS3；

· CSS3這種方式的數據排列是從上到下排列到一定高度後，再把剩餘元素依次添加到下一列；

 

3、絕對定位

可謂是最優的一種方案，方便添加數據內容，窗口變化，列數/數據塊都會自動調整；

缺點:

需要實現知道數據塊高度，如果其中包含圖片，需要知道圖片高度；

JS 動態計算數據塊位置，當窗口縮放頻繁，可能會狂耗性能。

文章轉載自 ：  css瀑布流佈局   http://www.studyofnet.com/news/725.html