实现方式

1) 传统多列浮动。即 蘑菇街和哇哦 采用的方式

• 各列固定宽度，并且左浮动；
• 一列中的数据块为一组，列中的每个数据块依次排列即可；
• 更多数据加载时，需要分别插入到不同的列上；
• 线上例子

优点:

• 布局简单，应该说没啥特别的难点；
• 不用明确知道数据块高度，当数据块中有图片时，就不需要指定图片高度。

缺点:

• 列数固定，扩展不易，当浏览器窗口大小变化时，只能固定的x列，如果要添加一列，很难调整数据块的排列；
• 滚动加载更多数据时，还要指定插入到第几列中，还是不方便。

2) CSS3 定义

• column-count 为列数； column-gap 为每列间隔距离； column-rule 为间隔边线大小； column-width 为每列宽度； 当只设置 column-width 时，浏览器窗口小于一列宽度时，列中内容自动隐藏； 当只设置 column-count 时，平均计算每列宽度，列内内容超出则隐藏； 都设了 column-count 和column-width，浏览器会根据 count 计算宽度和 width 比较，取大的那个值作为每列宽度，然后当窗口缩小时，width 的值为每列最小宽度。这边其实很简单，简易自己尝试下，详细可参考 https://developer.mozilla.org/en/CSS3_Columns 中的说明。

优点:

• 直接 CSS 定义，最方便了；
• 扩展方便，直接往容器里添加内容即可。

缺点:

• 只有高级浏览器中才能使用；
• 还有一个缺点，他的数据块排列是从上到下排列到一定高度后，再把剩余元素依次添加到下一列，这个本质上就不一样了；
• 鉴于这两个主要缺点，注定了该方法只能局限于高端浏览器，而且，更适合于文字多栏排列。

3) 绝对定位。

可谓是最优的一种方案，方便添加数据内容，窗口变化，列数/数据块都会自动调整；

缺点:

• 需要实现知道数据块高度，如果其中包含图片，需要知道图片高度；
• JS 动态计算数据块位置，当窗口缩放频繁，可能会狂耗性能。

自适应瀑布流（原生JS）

下面的这个例子是用第三种方案实现的，注释也很清楚了，应用点：本站的图片展示，美图酷览。自适应宽度，支持浏览器伸缩。具体参见demo

JS代码：