什么是瀑布流网页布局？
瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。
下面来看代码，用纯CSS3来做看效果怎样！
HTML
<div id="all">
<div class="box">
<div class="pic">
<img src="cars/1.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="cars/2.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="cars/3.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="cars/4.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="cars/5.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="cars/6.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="cars/7.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="cars/8.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="cars/9.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="cars/10.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="cars/11.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="cars/12.jpg"/>
</div>
</div>
</div>
这里用一个大盒子来装全部内容，小盒子box装块内容，pic盒子装图片。看css的代码
CSS
*{
margin: 0;
padding: 0;
}#all{
/*关键代码*/
-webkit-column-width: 437px;
-moz-column-width: 437px;
-o-column-width: 437px;
-ms-column-width: 437px;
/*-webkit-column-count: 3;
-moz-column-count: 3;
-o-column-count: 3;
-ms-column-count: 3;*/
/*-webkit-column-rule: 2px dashed #F00;
-moz-column-rule: 2px dashed #F00;
-o-column-rule: 2px dashed #F00;
-ms-column-rule: 2px dashed #F00;*/
/*-webkit-column-gap: 5px;
-moz-column-gap: 5px;
-o-column-gap: 5px;
-ms-column-gap: 5px;*/
}
.box{
padding: 15px 0 0 15px;
}
.pic{
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 0 5px #ccc ;
