一种网页展示效果，每行有多个区块或图片，这些区块或图片不在一个水平线上对齐，然后重复重复再重复。
这个叫：瀑布流布局，不应该叫css瀑布流，因为纯css实现的浏览器支持不好，基本上都是有JS的。
首先，css3的布局主要用到下面三个属性
column-count
column-gap
column-rule
其次，在兼容column的浏览器中可以实现瀑布流，代码如下
.demo{width: 500px
height: auto
-webkit-column-count:3
-moz-column-count:3
column-count:3
-webkit-column-gap:10px
-moz-column-gap:10px
column-gap:10px
column-rule:3px outset #ff0000
border: 1px solid #ddd
}
.demo div{
background: #336699
margin-bottom: 4px
color: #eee
padding: 10px
} <div class="demo">
<div>1这是测试用的文字，测试能不能实现瀑布流。</div>
<div>2这是测试用的文字，测试能不能实现瀑布流。</div>
<div>3这是测试用的文字，测试能不能实现瀑布流。</div>
<div>4这是测试用的文字，测试能不能实现瀑布流。</div>
<div>5这是测试用的文字，测试能不能实现瀑布流。</div>
<div>6这是测试用的文字，测试能不能实现瀑布流。</div>
<div>7这是测试用的文字，测试能不能实现瀑布流。</div>
<div>8这是测试用的文字，测试能不能实现瀑布流。</div>
<div>9这是测试用的文字，测试能不能实现瀑布流。</div>
<div>11这是测试用的文字，测试能不能实现瀑布流。</div>
<div>12这是测试用的文字，测试能不能实现瀑布流。</div>
<div>13这是测试用的文字，测试能不能实现瀑布流。</div>
<div>14这是测试用的文字，测试能不能实现瀑布流。</div>
<div>15这是测试用的文字，测试能不能实现瀑布流。</div>
<div>16这是测试用的文字，测试能不能实现瀑布流。</div>
<div>17这是测试用的文字，测试能不能实现瀑布流。</div>
<div>18这是测试用的文字，测试能不能实现瀑布流。</div>
<div>19这是测试用的文字，测试能不能实现瀑布流。</div>
</div>
</div>
这种瀑布流实现大体有两种方式，一种就是js的方式，一种是css，相对于js来说css的控制不是很好，不能自动加载之类的，只能显示一个瀑布流效果，大体的思路就是一个div里面放两个div分别浮动，高度自动，然后将图片分别放置到这两个div里面，这样就出现一个类似于瀑布流的效果了，当然了这个伪瀑布流的弊端就是如果一列的图片都是很高的，一列都是很矮的图片看着会很不协调。大体就是这个样子
