通过css3实现页面瀑布流的几种方式

第一种简单的实现方法是通过 css3 flex属性

假设三列布局，html中写入代码如下：

css代码如下：

		div{width: 100%;display: flex;flex-direction:row;justify-content: space-around;}
		ul{display: flex;list-style-type: none;flex-direction: column;}
		#item{align-self: flex-start;}
		#item a{display: block;text-align: center;}
		img{max-width: 300px;height: auto;}

flex布局简单灵活，目前新版本的浏览器都能支持。

另外一种比较简单的方式，是通过css3的column-width或者column-count进行布局，这里以column-width为例，css样式代码如下：

		div{column-width:400px;
			-moz-column-width:400px; /* Firefox */
			-webkit-column-width:400px; /* Safari 和 Chrome */
			-o-column-width:}
		ul{list-style-type: none;}
		
		#item a{display: block;text-align: center;}
		img{max-width: 300px;height: auto;}

更高级一点的可以通过js或者jquery实现，通过window.onScroll实现拖动显示。