MoeNovaClient/components/w-waterfall/w-waterfall.vue

<template>
	<view class="waterfall-list-container">
		<view class="waterfall-list" v-for="(item, index) in columnCount" :key="index"
			:style="{ width: width,margin:`0 ${itemGap}rpx`}">
			<view v-for="(el, i) in list[index]" :key="i">
				<slot name="content" :item="el" :width="width" />
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "w-waterfall",
		props: {
			sideGap: {
				type: Number,
				default: 20
			},
			itemGap: {
				type: Number,
				default: 10
			},
			columnCount: {
				type: Number,
				default: 2,
			},
			data: {
				type: Array,
				default: () => ([])
			}
		},
		watch: {
			data: {
				handler(newV) {
					if (newV.length != 0) {
						this.init()
					}
				},
				immediate: true
			}
		},
		mounted() {
			const screenWidth = uni.getWindowInfo().screenWidth;
			const screenRate = screenWidth / 750;
			const gap = ((this.columnCount - 1) * this.itemGap) + this.sideGap;
			const itemWidth = (screenWidth - gap) / this.columnCount
			this.width = Math.round(itemWidth * (1 / screenRate)) + 'rpx'
		},
		data() {
			return {
				width: '',
				list: []
			};
		},
		methods: {
			init() {
				let list = []
				for (let i = 0; i < this.columnCount; i++) {
					list[i] = []
				}
				let i = 0
				this.data.forEach((el, index) => {
					if (i > this.columnCount - 1) {
						i = 0
					}
					list[i].push(el)
					i++
				})
				this.list = list
			},
		}
	}
</script>

<style lang="scss">
	.waterfall-list-container {
		// #ifdef APP-NVUE
		// #endif
		// #ifndef APP-NVUE
		// #endif
		display: flex;
		flex-direction: row;
		justify-content: center;
	}
</style>