universal-wechat-uniapp-241007/components/list/square/waterfallContainer.vue

<template>
	<view class="waterfall-container">
		<view class="waterfall-columns">
			<!-- 左列 -->
			<view class="waterfall-column">
				<waterfallItem 
					v-for="(item, index) in leftColumnData" 
					:key="'left_' + index"
					:item="item"
					@click="handleItemClick"
					@like="handleItemLike"
				/>
			</view>
			
			<!-- 右列 -->
			<view class="waterfall-column">
				<waterfallItem 
					v-for="(item, index) in rightColumnData" 
					:key="'right_' + index"
					:item="item"
					@click="handleItemClick"
					@like="handleItemLike"
				/>
			</view>
		</view>
	</view>
</template>

<script>
	import waterfallItem from './waterfallItem.vue'
	
	export default {
		components: {
			waterfallItem
		},
		props: {
			list: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				leftColumnData: [],
				rightColumnData: []
			}
		},
		watch: {
			list: {
				handler(newList) {
					this.distributeItems(newList)
				},
				immediate: true
			}
		},
		methods: {
			// 将数据分配到左右两列
			distributeItems(items) {
				this.leftColumnData = []
				this.rightColumnData = []
				
				items.forEach((item, index) => {
					// 简单的奇偶分配，也可以根据内容高度智能分配
					if (index % 2 === 0) {
						this.leftColumnData.push(item)
					} else {
						this.rightColumnData.push(item)
					}
				})
			},
			
			// 处理点击事件
			handleItemClick(item) {
				this.$emit('item-click', item)
			},
			
			// 处理点赞事件
			handleItemLike(item) {
				this.$emit('item-like', item)
			}
		}
	}
</script>

<style scoped lang="scss">
	.waterfall-container {
		padding: 20rpx;
		
		.waterfall-columns {
			display: flex;
			gap: 20rpx;
			
			.waterfall-column {
				flex: 1;
				display: flex;
				flex-direction: column;
			}
		}
	}
</style>