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: '平面作品+李宇轩',
	}
];

  • 2
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 要实现一个 Vue 3 瀑布流组件,你可以这么做: 1. 在你的 Vue 项目中安装并引入 masonry 布局插件,比如: ``` npm install masonry-layout ``` 2. 在你的 Vue 组件中引入 masonry 布局插件,并在 mounted 钩子函数中初始化 masonry 布局: ``` import Masonry from 'masonry-layout'; export default { mounted() { this.msnry = new Masonry(this.$el, { // 配置 masonry 布局的选项 }); }, }; ``` 3. 在组件的 template 中使用 masonry 布局。你可以在外层包裹一个容器元素,然后给容器元素的子元素设置类似 masonry-brick 的类名,这些子元素就会按照 masonry 布局的方式排列: ``` <template> <div class="masonry-container"> <div class="masonry-brick" v-for="item in items" :key="item.id"> <!-- 这里是单个瀑布流元素的内容 --> </div> </div> </template> ``` 4. 在组件的 data 中定义 items 数据,表示瀑布流中的所有元素,然后在 template 中使用 v-for 指令渲染这些元素。 5. 如果你想在组件中动态添加、删除瀑布流元素,你可以在对应的方法中调用 masonry 布局插件的 addItems、remove、reloadItems 等方法来更新布局。 例如,在组件的 addItem 方法中,你可以这么写: ``` addItem() { // ### 回答2: 要实现一个基于Vue3的瀑布流组件,我们可以按照以下步骤进行: 1. 创建一个Vue组件,并在组件中定义我们需要的数据和方法。 2. 在数据中定义一个数组,用于存储需要展示的图片或其他内容的信息,例如图片的URL地址。 3. 在组件的生命周期钩子函数中,可以使用一些异步请求或者模拟数据的方法来获取图片或其他内容的信息,并将获取到的数据存储到数组中。 4. 在组件的模板中,使用`v-for`指令来循环遍历数组中的数据,并在每个循环项中展示相应的内容。 5. 使用CSS样式来实现瀑布流布局,可以使用`grid`布局或者`flex`布局来实现。设置每个项的宽度和高度,并使用`column-count`或者`column-width`等属性来控制列数和列宽。 6. 当内容很多时,需要实现视图滚动时的无限加载功能,可以通过监听页面的滚动事件,在滚动到底部时加载更多的内容。 7. 可以添加一些交互的功能,例如点击某个内容项时,可以弹出大图展示或者跳转到详情页。 总结起来,实现一个Vue3的瀑布流组件主要需要定义数据、实现数据的获取和展示,以及使用CSS样式来布局和滚动加载等功能。通过以上步骤的操作,我们就可以完成一个基于Vue3的瀑布流组件。 ### 回答3: 实现一个Vue3瀑布流组件可以通过以下步骤进行: 1. 安装Vue3和相关依赖:首先,我们需要在项目中安装Vue3和其他可能用到的相关依赖,可以使用npm或yarn命令进行安装。 2. 创建瀑布流组件:在Vue3中,创建一个组件需要使用`createApp`方法。我们可以在需要显示瀑布流的页面上使用`createApp`方法创建一个Vue实例,并在`setup`函数中定义瀑布流组件。 3. 定义瀑布流布局:在瀑布流组件中,我们需要定义如何进行布局。一种常见的瀑布流布局是使用CSS的`column-count`属性实现。我们可以在瀑布流组件的模板中使用`v-for`指令遍历需要展示的数据,并使用`column-count`属性将它们分成多列。 4. 动态计算布局:由于瀑布流中的每列高度不一致,我们需要动态计算每个元素的位置。可以在瀑布流组件的`setup`函数中使用Vue3的响应式数据来保存每列的高度,并在模板中根据每列的高度动态设置每个元素的位置。 5. 处理滚动加载:瀑布流一般需要滚动加载更多数据,我们可以通过监听滚动事件来判断是否需要加载更多数据。可以使用Vue3的`onMounted`钩子函数来在组件加载完毕后绑定滚动事件,并使用`onUnmounted`钩子函数在组件卸载时解绑滚动事件。 6. 实现数据加载:在滚动加载时,可以通过请求接口或其他方式加载更多数据,并将新加载的数据添加到原有的数据列表中。可以在瀑布流组件的`setup`函数中使用Vue3的响应式数据来保存数据列表,并在模板中使用`v-for`指令遍历展示所有的数据。 7. 响应式优化:为了提高性能和用户体验,可以对瀑布流组件进行响应式优化。可以使用Vue3的`watchEffect`函数来监听数据的变化,并在数据发生变化时重新计算布局和渲染页面。 总结:通过以上步骤,我们可以实现一个基本的Vue3瀑布流组件。当然,实际项目中可能还需要考虑更多的功能和细节,如图片加载优化、动画效果等。希望以上的回答能给您提供一些参考。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值