移动端纯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;
            }
       }
}

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

HTML:

	
		
		我是标题
		我是内容