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