移动端纯css实现瀑布流

效果图：

css 

column-count: 2;      数字为2，代表一行显示几个

break-inside: avoid;   去空白，避免换行

.content{
		padding: 30rpx;
		box-sizing: border-box;
		column-count: 2;
		.list {
			break-inside: avoid;
			width: 330rpx;
			border: 1px solid #f4f4f4;
			image {
				width: 100%;
				border-radius: 6rpx;
			}
		
			.title {
				margin-left: 15rpx;
				margin-right: 15rpx;
				font-size: 30rpx;
			}
            .con{
                margin: 15rpx;
				margin-top: 20rpx;
				display: flex;
				font-size: 26rpx;
				align-items: center;
				justify-content: space-between;
            }
       }
}

这里图片给个默认宽度，高度自适应

<image mode="widthFix" src="/static/1.png"></image>

HTML:

<view class="content">
	<view class="list" v-for="(value,index) in 5" :key='index'>
		<image mode="widthFix" src="static/1.png"></image>
		<view class="title">我是标题</view>
		<view class="con">我是内容</view>
	</view>
</view>