css3之 瀑布流

瀑布流有很多种实现方式，本次使用css3的 column-count  方式来实现。

 

官方说明：http://www.w3school.com.cn/cssref/pr_column-count.asp

 

本次具体案例：

 

    部分css：

.contentimg {
	width: 100%;
	margin: 5px auto;
	-webkit-column-count: 2;
	column-count: 2;
	column-gap: 5px;
	-webkit-column-gap: 5px;
	list-style-type: none;
}
.contentimg li {
	background-color: rgb(175, 0, 3);
	padding: 5px;
	margin-top: 10px;
	padding-bottom: 30px;
	color: white;
}
.contentimg li img {
	margin-bottom: 5px;
	/*position: relative;*/
}

   效果：