前端uniapp封装商城瀑布流，复制即可用

 1.二次封装的vue瀑布流组件

<template>
	<view id="container_id" class="container" style="background-color: #F8F9FB;">
		<view class="box">
			<custom-waterfalls-flow ref="waterfallsFlowRef" :value="listData" :column="2" :columnSpace="1.5" :seat="2"
				@imageClick="goDetail($event)">
				<template v-slot:default="item">
					<view class="eventList">
						<view class="event">
							<view class="event_title">{{item.title}}</view>
							<view class="event_focus">￥{{(item.price*0.01).toFixed(2)}}</view>
							<view class="event_time">{{item.desc}}</view>
						</view>
					</view>
				</template>
			</custom-waterfalls-flow>
		</view>
	</view>
</template>
<script>
	export default {
		name: 'list',
		props: {
			sendToDataListAssembly: {
				type: [String, Number, Array, Object, Boolean],
			},
		},
		data() {
			return {
				pageShow: false,
				paging: { //分页
					rows: 2,
					size: 10
				},
				pageList: {
					code: ''
				},
				isPaging: false,
				id: '',
				listData: [],
				eventList: []

			}
		},
		beforeCreate() {
			// console.log('组件初始化,未完全创建阶段')
		},

		created() {

			this.pageShow = true;
			// console.log('当前pageShow',this.pageShow);
		},
		updated() {
			this.isPaging = this.sendToDataListAssembly.isPaging //是否要分页
		},

		methods: {
			getList(val) {
				console.log(val)
				this.$http.api.shop_index_goods({
					...val,
				}).then(res => {
					this.pageList = res
					if (res.code == 200) {
						if (res.data.length) {
							res.data.forEach(item => {
								item.num = 0
								item.image = item.cover
							})
							if (res.total < 10 || res.total == 10) {
								// if(val.rows>=res.total/val.rows){
								this.$emit('isPaging', false) //如果没有更多数据，则要改变分页状态(传给父组件 把分页关闭 否则会影响渲染)
							} else {
								this.$emit('isPaging', true) //如果没有更多数据，则要改变分页状态(传给父组件 把分页关闭 否则会影响渲染)
							}
							if (this.isPaging) {
								if (res.data.length == 0) {
									this.$emit('isPaging', false) //如果没有更多数据，则要改变分页状态(传给父组件 把分页关闭 否则会影响渲染)
									return;
								}
								this.listData = [...this.listData, ...res.data] //合并数据
							} else {
								this.listData = [...this.listData, ...res.data] //合并数据
							}
						} else {
							if (res.total == 0) {
								this.listData = []
							} else {
								this.$emit('isPaging', false) //如果没有更多数据，则要改变分页状态(传给父组件 把分页关闭 否则会影响渲染)
							}

						}
						this.$emit('userData', this.listData.length)
					}
				})
				if (val.orderBy != '' && val.rows == 1) {
					this.$refs.waterfallsFlowRef.refresh();
				}
			},
			goDetail(item) {
					uni.navigateTo({
						url: `/detailShop/detailPage/detailPage?id=${item.goodsId}`
					})
			}
		}
	}
</script>


<style>
	@import url("./style.css");
</style>

 一定要下载插件喔！插件下载地址瀑布流 灵活配置 简单易用 兼容vue2vue3小程序、H5、app等多端 - DCloud 插件市场

2.css文件

.container {
	width: 100%;
	/* padding: 0!important; */
	/* height: 100%; */
	flex-direction: center;
	box-sizing: border-box;
	margin: auto;
}

.box {
	/* margin-top: 40rpx; */
	padding: 0 20rpx;
	z-index: 90;
}

::v-deep .u-number-box__plus {
	width: 44rpx;
}

::v-deep .u-number-box__minus {
	width: 44rpx;
}

.box .box_title {
	font-size: 40rpx;
	font-weight: 700;
	color: #333333;

}

.box .box_more {
	color: #333333;
	margin-top: 8rpx;
	font-size: 28rpx;
}

.eventList {}

.eventList .event {
	height: 100%;
	margin-bottom: 20rpx;
	background-color: #fff;
}

.eventList .event:nth-child(even) {
	margin-right: unset !important;
}

.eventList .event image {
	/* width: 340rpx; */
	width: 100%;
	height: 350rpx;
	/* height: 140rpx; */
	border-radius: 6rpx;
}

.eventList .event .event_title {
	color: #333333;
	padding: 10rpx 10rpx 0;
	width: 93%;
	font-size: 24rpx;
	max-width: 340rpx;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	overflow: hidden;
	-webkit-box-orient: vertical;
}

.eventList .event .event_time {
	/* width: 85%; */
	font-size: 20rpx !important;
	color: #999999;
	/* margin-bottom: 6rpx; */
	letter-spacing: 0.01rpx;
	padding: 0 10rpx;
	max-width: 340rpx;
	text-overflow: ellipsis; /* 溢出显示省略号 */
	    overflow: hidden; /* 溢出隐藏 */
	    white-space: nowrap;  /* 强制不换行 */
	}

.eventList .event .event_focus {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 28rpx;
	margin-top: 10rpx;
	padding: 0 10rpx;
	/* line-height: 50rpx; */
	border-radius: 6rpx;
	color: #E02525;
	letter-spacing: 0.02rpx;
}

.eventList .event .event_yifocus {
	color: #999999;
}

3.在页面使用二次封装瀑布流

<template>
<view class="">
				<shoplist :sendToDataListAssembly="sendToDataListAssembly" ref="dataListCpt" @isPaging="isPaging">
				</shoplist>
			</view>
</template>
<script>
import shoplist from '../../detailShop/components/shoplist/shoplist.vue'
data() {
			return {
				sendToDataListAssembly: {
					isPaging: true,
					pageShow: false
				},
				paging: {
					rows: 1,
					size: 10,
					orderBy: ''
				},
			}
		},
mounted() {
			this.$refs.dataListCpt.getList({ //传页码和每页数据给子组件
				...this.paging
			})
		},
methods:{
isPaging(val) {
				this.sendToDataListAssembly.isPaging = val
			},
onReachBottom() {
				console.log('触底了')
				if (this.sendToDataListAssembly.isPaging) { //判断是否要开启分页(默认打开 没数据就关)
					this.paging.rows = this.paging.rows + 1
					this.$refs.dataListCpt.getList({ //传页码和每页数据给子组件
						...this.paging
					})
				}
			},
}
</script>