Vue3实现简单的瀑布流效果，可抽离成组件直接使用

先来看下效果图：

瀑布流中的内容可进行自定义，这里的示例图是通过不同背景颜色的展示进行区分，每个瀑布流中添加了自定义图片和文字描述。

实现方式：

1.建立子组件（可单独抽离）写出瀑布流的样式

文件名为waterFall.vue

<template>
	<div class="list">
		<div
			class="item"
			v-for="(item, index) in waterList"
			:style="{
				width: width + 'px',
				height: item.height + 'px',
				left: item.left + 'px',
				top: item.top + 'px',
				background: item.background,
			}"
		>
			<img :src="item.image" :alt="item.text" />
			<p class="text-box">{{ item.text }}</p>
		</div>
	</div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
const props = defineProps({
	list: {
		type: Array,
		default: () => {
			return [];
		},
	},
});

// 图片宽度
const width = 120;
// 图片上下间距
const gap = 20;
// 瀑布流数组
const waterList = ref([]);
// 列高度数组
const heightList = reactive([]);

// 屏幕宽度需要在 mounted 之后拿到
onMounted(() => {
	// 计算列数
	const column = Math.floor(document.body.clientWidth / width);
	// 核心内容就是维护每个图片的 left、top
	for (let i = 0; i < props.list.length; i++) {
		// 先铺上第一行（i < column 则表示是第一行）
		if (i < column) {
			props.list[i].top = 0;
			props.list[i].left = width * i;
			// 塞进瀑布流
			waterList.value?.push(props.list[i]);
			// 高度数据更新
			heightList[i] = props.list[i].height;
		}

		// 后面的就要一张张塞进去，每次找出最低的列往里塞
		else {
			// 最低的高度，先默认为第一列高度
			let current = heightList[0];
			// 最低的列，先默认为第一个
			let col = 0;

			// 循环每一列进行比较
			heightList.forEach((h, i) => {
				if (h < current) {
					current = h;
					col = i;
				}
			});
			console.log('最低的列', col, '高度为', current);

			// 由此计算出该图片的 left、top
			props.list[i].left = col * width;
			props.list[i].top = current + gap;
			// 塞进瀑布流
			waterList.value.push(props.list[i]);

			// 更新列高度数组
			heightList[col] = current + gap + props.list[i].height;
		}
	}
	console.log('waterList', waterList.value);
	console.log('heightList', heightList);
});
</script>
<style lang="scss" scoped>
.list {
	position: relative;
	height: 100%;
	overflow-y: auto;
	width: 100%;
	.item {
		position: absolute;
		.text-box {
			font-weight: 500px;
			font-size: 18px;
			color: #000000;
		}
	}
}
</style>

2.在父组件中引入使用

父组件中引入使用，其中list为展示的瀑布流数组，class可设置当前瀑布流的一些盒子样式

<water-fall :list="list" class="water-fall" />

3.在父组件中传值实现瀑布流效果

在父组件中设置瀑布流的数据，这里为了方便展示，直接使用的样例数据，实际开发中，可根据接口来进行获取。

其中的height是指瀑布流中每一个的高度，background为背景颜色，image为自定义的图片，text为描述，以上均可根据个人需求进行自定义展示。

const list = [
	{
		height: 300,
		background: 'red',
		image: '/images/works-publicity/tradition.png',
		text: '平面作品+李宇轩',
	},
	{
		height: 400,
		background: 'pink',
		text: '美术作品+沈佳宜',
		image: '/images/works-publicity/tradition.png',
	},
	{
		height: 500,
		background: 'blue',
		image: '/images/works-publicity/tradition.png',
		text: '平面作品+李宇轩',
	},
	{
		height: 200,
		background: 'green',
		image: '/images/works-publicity/tradition.png',
		text: '平面作品+李宇轩',
	},
	{
		height: 300,
		background: 'gray',
		image: '/images/works-publicity/tradition.png',
		text: '平面作品+李宇轩',
	},
	{
		height: 400,
		background: '#CC00FF',
		image: '/images/works-publicity/tradition.png',
		text: '平面作品+李宇轩',
	},
	{
		height: 200,
		background: 'pink',
		image: '/images/works-publicity/tradition.png',
		text: '平面作品+李宇轩',
	},
	{
		height: 100,
		background: '#996666',
		image: '/images/works-publicity/tradition.png',
		text: '平面作品+李宇轩',
	},
	{
		height: 300,
		background: 'gray',
		image: '/images/works-publicity/tradition.png',
		text: '平面作品+李宇轩',
	},
	{
		height: 400,
		background: '#CC00FF',
		image: '/images/works-publicity/tradition.png',
		text: '平面作品+李宇轩',
	},
	{
		height: 200,
		background: 'gray',
		image: '/images/works-publicity/tradition.png',
		text: '平面作品+李宇轩',
	},
	{
		height: 100,
		background: '#996666',
		image: '/images/works-publicity/tradition.png',
		text: '平面作品+李宇轩',
	},
	{
		height: 300,
		background: 'gray',
		image: '/images/works-publicity/tradition.png',
		text: '平面作品+李宇轩',
	},
	{
		height: 400,
		background: '#CC00FF',
		image: '/images/works-publicity/tradition.png',
		text: '平面作品+李宇轩',
	},
	{
		height: 200,
		background: 'gray',
		image: '/images/works-publicity/tradition.png',
		text: '平面作品+李宇轩',
	},
	{
		height: 100,
		background: '#996666',
		image: '/images/works-publicity/tradition.png',
		text: '平面作品+李宇轩',
	},
	{
		height: 300,
		background: 'gray',
		image: '/images/works-publicity/tradition.png',
		text: '平面作品+李宇轩',
	},
	{
		height: 400,
		background: '#CC00FF',
		image: '/images/works-publicity/tradition.png',
		text: '平面作品+李宇轩',
	}
];