uniapp+vue开发微信小程序实现瀑布流

<template>
	<view class="container">
		<!-- 商品卡片 -->
		<view class="content">
			<view class="item" v-for="item in commendList" :key="item.id">
				<image class="img" :src="item.image" mode="widthFix"></image>
				<view class="name">
					{{item.name}}
				</view>
				<view class="bottom">
					<view class="price">
						￥9.9元
					</view>
					<view class="total">
						已售99件
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script setup>
//数据
const commendList = ref([]);
</script>
<style scoped lang="scss">
	.container {
		.content {
			padding: 0 3vw;
			column-count: 2;//限制两列数据
            //column-width:;//列的宽度
            //column-gap:;//列与列之间的间距
			.item {
				border: 1px solid rgba(255, 255, 255, 1);
				border-radius: 10rpx;
				width: 45vw;
				background-color: white;
				break-inside: avoid;//防止元素中断到不同列
				margin-bottom: 20rpx;
				.img {
					width: 45vw;
					max-height: 26vh;
				}

				.name {
					color: rgba(16, 16, 16, 1);
					font-size: 26rpx;
					height: 50rpx;
					line-height: 50rpx;
					padding: 0 10rpx;
				}

				.bottom {
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 24rpx;
					height: 50rpx;
					line-height: 50rpx;
					padding: 0 16rpx;

					.price {
						color: rgba(16, 16, 16, 1);
					}

					.total {
						color: #9F9F9F;
					}
				}
			}
		}
	}
</style>

注：

1、uniapp没有img标签，只有image，这里需要给image标签加上mode="widthFix"，图片才会高度自适应