移动端实现瀑布流布局！

column 多行布局实现瀑布流！

一、html

<div class="waterFall">
	<div class="item">
		<div class="item_son">
			<img class="icon" src="images/[email protected]"/>					
			<div class="item_img"><img src="images/[email protected]"/></div>
		</div>
		<div class="item_con">
			<div class="item_con_txt">瀑布流布局瀑布流布局瀑布流布局</div>
			<div class="item_con_num">评分：12.23</div>
			<div class="item_con_dz">点赞数：123</div>
		</div>
	</div>
	<div class="item">
		<div class="item_son">
			<img class="icon" src="images/[email protected]"/>					
			<div class="item_img"><img src="images/[email protected]"/></div>
		</div>
		<div class="item_con">
			<div class="item_con_txt">瀑布流布局</div>
			<div class="item_con_num">评分：12.23</div>
			<div class="item_con_dz">点赞数：123</div>
		</div>
	</div>
	<div class="item">
		<div class="item_son">
			<img class="icon" src="images/[email protected]"/>					
			<div class="item_img"><img src="images/[email protected]"/></div>
		</div>
		<div class="item_con">
			<div class="item_con_txt">瀑布流布局瀑布流布局</div>
			<div class="item_con_num">评分：12.23</div>
			<div class="item_con_dz">点赞数：123</div>
		</div>
	</div>
	<div class="item">
		<div class="item_son">
			<img class="icon" src="images/[email protected]"/>					
			<div class="item_img"><img src="images/[email protected]"/></div>
		</div>
		<div class="item_con">
			<div class="item_con_txt">瀑布流布局瀑布流布局瀑布流布局</div>
			<div class="item_con_num">评分：12.23</div>
			<div class="item_con_dz">点赞数：123</div>
		</div>
	</div>
</div>

二、css

<style type="text/css">
	.waterFall{
		width: 7.5rem;
		column-count: 2;	/*列表 列*/
		/*column-gap:0.1rem;*/	/*列表之前的间距*/
		padding: 0.15rem;
		box-sizing: border-box;
	}
	.item_con{
		padding: 0.1rem;
		box-sizing: border-box;
		color:midnightblue;
	}
	.item{
		width: 3.44rem;
		height: auto;
		background: #EBEBEB;
		display: flex;
		flex-direction: column;
		justify-content: center;
		break-inside: avoid;	/*避免在元素内部断行并产生新列 */
		margin-bottom: 0.2rem;
		border-radius: 0.08rem;
	}
	.item_son{
		width: 3.44rem;
		height: 4.57rem;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		position: relative;
		background: peachpuff;
	}
	.item_img{
		width: 3.44rem;
		height: auto;
	}
	.item_img>img{
		width: 100%;
		height: 100%;
	}
	.icon{
		position: absolute;
		top: 0.2rem;
		left: 0.2rem;
		width: 0.5rem;
		height: 0.5rem;
	}
</style>

ps：之前用js总有各种问题，特别是和video一起~