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