简单实现瀑布流

 view

<view class="list-view">
			<view class="m-view" v-for="(item,index) in listGoods" :key="item">
				<image class="g-img" src="../../static/temp/cate21.jpg" mode=""></image>
				<view class="m-title">
					ZL933袜子（男女款）5双/袋颜色随机
					3天发货
				</view>
				<view class="j-view">
					200 积分
				</view>
			</view>
		</view>

js

export default {
		data() {
			return {
				listGoods:[1,1,1,1,1,1,1,1,1,1]
			}
		},
		methods: {
			
		}
	}

css

	.list-view{
		width: 100%;
		background-color: #FFFFFF;
		padding: 20upx;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
	}
	.m-view{
		width: 346upx;
		height: 408upx;
		background:rgba(255,255,255,1);
		border-radius:8upx;
		border:1upx solid rgba(216,216,216,1);
		margin-bottom: 20upx;
	}
	.m-view:nth-child(odd){
		margin-right: 20upx;
	}
	.g-img{
		width: 342upx;
		height: 262upx;
		border-radius:8upx 8upx 0upx 0upx;
	}
	
	.m-title{
		padding: 10upx;
		font-size:24upx;
		font-weight:500;
		color:rgba(78,78,78,1);
		line-height:32upx;
	}
	.j-view{
		padding: 10upx;
		font-size:26upx;
		font-weight:500;
		color:rgba(244,72,86,1);
		line-height:36upx;
	}

简单实现瀑布流，架子搭好，里面样式自己可以修改定义