CSS3&JavaScript 瀑布流

实现方法概述

html页面要实现瀑布流，目前有两种方案，它们的适用场景不同

• CSS3 的 column-count（适用于所有元素一次性加载，页面更新用分页来实现，且元素与位置依赖度不高的传统布局上）
• 用 JavaScript 进行动态测量，并使用 absolute 的 top 和 left 进行绝对定位（适用于所有元素分批加载，滑动到底部自动添加下一批元素的情况）

当然，网上还有介绍 CSS3 的 grid 方案，很可惜，目前为止，所有的浏览器均不支持该样式属性。

1. CSS3 的 column-count

分栏的用途很广泛，除了实现像 word 的那种文本分栏，还可以实现 table（或 grid）布局 和 瀑布流 等。

（1）文本分栏

可惜的是 column-span 这个属性并不被 firefox 支持。

 




英国维斯米斯特教堂碑文
当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。

（2）table表格（grid）

1
2
3
4
5
6
7
8
9

（3）瀑布流

从下图可以看出通过 column-count 来实现的瀑布流有一个非常大的弊端，就是它的方向不能调节。一定是从上到下，然后从左到右排列的。这就照成了一个问题——与国人的视图习惯不同。

因此，该实现方案适用性非常狭窄，不适用于竞价式这种与位置强依赖的布局，而只能适用于元素于位置弱依赖的静态布局种。

2. 用 JavaScript 进行动态测量，并使用 absolute 的 top 和 left 进行绝对定位

在概率论和统计学中，期望值（或数学期望、或均值，亦简称期望，物理学中称为期待值）是指在一个离散性随机变量试验中每次可能结果的概率乘以其结果的总和。

这里可以把随机图片的高度看成这个离散的随机数，那么我们可以得出一个结论就是每列的高度都接近与它们的期望值，因此即使我们不考虑每列的高度，它们也是相差无几的。