css的瀑布流布局

前段时间看到一个关于瀑布流布局的试题，就来给大家普及一下
其实大致的瀑布流就是把页面分为了几列操作，也就是重要的css属性：column-count：列数； 那么接下来代码如下：

		<div class="mydiv"> 
			<div class="item"> 
				<div class="item_content">
				</div> 
			</div> 
			<div class="item"> 
				<div class="item_content">
				</div> 
			</div> <div class="item"> 
			<div class="item_content"></div>
			</div> 
			<div class="item"> 
				<div class="item_content">
				</div> 
			</div> <div class="item"> 
				<div class="item_content">
				</div> 
			</div> <div class="item"> 
				<div class="item_content">
				</div> 
			</div> <div class="item"> 
				<div class="item_content">
				</div> 
			</div> 
			<div class="item"> 
				<div class="item_content">
				</div> 
				<div class="item_content">
				</div> 
				
			</div>
			<div class="item"> 
				<div class="item_content">		
				</div> 
			</div> <div class="item"> 
				<div class="item_content">
				</div>
				 </div> 
			
	</div>
	<!--这里div的个数可以随便来定-->
	

/* CSS  */
.mydiv { 
	column-count: 7;
	column-gap: 0; 

	
}
.item {
	padding: 10px;
	background: rgba(7,1,2,1.00);/*为了显示效果，所以我添加了背景颜色*/
}
.item_content{
	background: rgba(195,83,85,1.00);/*为了显示效果，所以我添加了背景颜色*/
	width:auto;
	height:380px;
}

OK，到这里我们就可以执行看看效果了
接下来就是我的效果

铛铛铛铛，这就是效果图了