• 效果
• 思路
• 实现
  • 先将列表分为两个
  • HTML中使用左右列表进行显示
  • 完整代码

效果

思路

瀑布流其实就是将放放商品信息列表展示的view分为了左右两个部分，然后固定了两个部分的宽度，高度不用管，这样就会有错位的感觉了。既然分为了左右两个容器来显示，那我们的商品信息列表，也得分出两个，一个列表内容用于左边的容器显示，一个用于右边容器显示即可。

实现

先将列表分为两个

// 总商品数据列表
var goodList = ref([])
// 左侧数据列表
var LeftList = ref([])
// 右侧数据列表
var RightList = ref([])

// 将商品信息列表分为左侧右侧两个部分
for (let i = 0; i < resp.results.length; i++) {
	if (i % 2 === 0) {
		LeftList.value.push(resp.results[i])
	} else {
		RightList.value.push(resp.results[i])
	}
}

HTML中使用左右列表进行显示

	<view class="waterfall">
		<view class="wt-left wt-list">
			<view class="wt-item" v-for="(good,index) in LeftList" :key="index" @click="ToDetail(good.id)">
				<view class="item-img">
					<image :src="good.cover_image" mode="aspectFill"></image>
				</view>
				<!-- 介绍部分 -->
				<view class="introduce-section">
					<text class="title">{{good.good_name}}</text>
					<view class="tags-box">
						<text>点击量：{{good.click_num}}</text>
						<text>收藏量：{{good.fav_num}}</text>
					</view>
				</view>
			</view>
		</view>

		<view class="vt-right wt-list">
			<view class="wt-item" v-for="(good,index) in RightList" :key="index" @click="ToDetail(good.id)">
				<view class="item-img">
					<image :src="good.cover_image" mode="aspectFill"></image>
				</view>
				<!-- 介绍部分 -->
				<view class="introduce-section">
					<text class="title">{{good.good_name}}</text>
					<view class="tags-box">
						<text>点击量：{{good.click_num}}</text>
						<text>收藏量：{{good.fav_num}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>

完整代码

<template>
	<view class="waterfall">
		<view class="wt-left wt-list">
			<view class="wt-item" v-for="(good,index) in LeftList" :key="index" @click="ToDetail(good.id)">
				<view class="item-img">
					<image :src="good.image" mode='widthFix'></image>
				</view>
				<!-- 介绍部分 -->
				<view class="introduce-section">
					<text class="title">{{good.name}}</text>
					<view class="tags-box">
						<text>点击量：{{good.click_num}}</text>
						<text>收藏量：{{good.fav_num}}</text>
					</view>
				</view>
			</view>
		</view>

		<view class="vt-right wt-list">
			<view class="wt-item" v-for="(good,index) in RightList" :key="index" @click="ToDetail(good.id)">
				<view class="item-img">
					<image :src="good.image" mode='widthFix'></image>
				</view>
				<!-- 介绍部分 -->
				<view class="introduce-section">
					<text class="title">{{good.name}}</text>
					<view class="tags-box">
						<text>点击量：{{good.click_num}}</text>
						<text>收藏量：{{good.fav_num}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'

	// 总商品数据列表
	var goodList = ref([{
			"id": 1,
			"name": "商品一",
			"image": "https://li-xun.work:8001/media/goods/images/%E4%B8%9B%E7%9F%A5%E4%BC%A0%E5%AA%92.png",
			"click_num": 22,
			"fav_num": 33
		}, {
			"id": 2,
			"name": "商品二",
			"image": "https://li-xun.work:8001/media/goods/images/%E4%BF%A1%E6%81%AF.png",
			"click_num": 22,
			"fav_num": 33
		}, {
			"id": 3,
			"name": "商品三",
			"image": "https://li-xun.work:8001/media/goods/images/%E6%9A%97%E6%9D%A0_8aGwy5q.jpg",
			"click_num": 888,
			"fav_num": 888
		}, {
			"id": 4,
			"name": "商品四",
			"image": "https://tse1-mm.cn.bing.net/th/id/OIP-C.MvBGMoOpeauMHajCOjdKvQHaJQ?pid=ImgDet&rs=1",
			"click_num": 888,
			"fav_num": 888
		},
		{
			"id": 5,
			"name": "商品五",
			"image": "https://li-xun.work:8001/media/goods/images/icon.png",
			"click_num": 888,
			"fav_num": 888
		},
		{
			"id": 6,
			"name": "商品六",
			"image": "https://li-xun.work:8001/media/goods/images/%E4%B8%9B%E7%9F%A5%E4%BC%A0%E5%AA%92.png",
			"click_num": 22,
			"fav_num": 33
		}
	])
	// 左侧数据列表
	var LeftList = ref([])
	// 右侧数据列表
	var RightList = ref([])

	// 将商品信息列表分为左侧右侧两个部分
	for (let i = 0; i < goodList.value.length; i++) {
		if (i % 2 === 0) {
			LeftList.value.push(goodList.value[i])
		} else {
			RightList.value.push(goodList.value[i])
		}
	}

	// 点击商品 跳转详情
	function ToDetail(id) {
		console.log("点击了商品", id)
	}
</script>

<style>
	.waterfall {
		display: flex;
		flex-direction: row;
		width: 740rpx;
		justify-content: center;
		overflow: hidden;
		margin-left: 10rpx;

	}


	.wt-list {
		width: 360rpx;
		display: flex;
		flex-direction: column;
		margin-right: 10rpx;
	}

	.wt-item {
		margin-bottom: 15rpx;
		background-color: #ffffff;
	}

	.item-img image {
		width: 100%;
	}

	/* 商品介绍 */
	.introduce-section {
		background: #ffffff;
		padding: 20rpx 30rpx;
	}

	.introduce-section .title {
		font-size: 32rpx;
		color: #303133;
		height: 50rpx;
		line-height: 50rpx;
	}

	.introduce-section .tags-box {
		display: flex;
		align-items: center;
		height: 30rpx;
		font-size: 24rpx;
		color: #909399;
	}
</style>

效果展示：

以上，自己写一个瀑布流的记录