vue3瀑布流示例,左侧菜单根据窗口滚动条进行固定和取消固定,实现瀑布流demo

本文主要是介绍vue3瀑布流示例,左侧菜单根据窗口滚动条进行固定和取消固定,实现瀑布流demo,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

瀑布流demo的实现效果:

效果说明:

1.使用vue3实现瀑布流效果;

2.瀑布流横向设置5等分,可根据个人需求调整;

3.左侧菜单可根据右侧滚动条滑动时进行固定和取消固定,实现更优的展示效果;

4.瀑布流中的图片可使用img标签,也可使用背景图片(代码中注释的部分已标名)

实现方式:

一、创建瀑布流子组件

1.新建瀑布流组件的vue文件,如命名为WaterFall.vue

2.构建瀑布流中展示的内容,可根据不同需求进行自定义

<template><div class="list"><divclass="item"v-for="(item, index) in waterList":key="index":style="{width: width + 'px',height: item.height + 'px',left: item.left + 'px',top: item.top + 'px',// 'background-image': 'url(' + item.image + ')', // 假设 item 对象中有 image 属性// 'background-size': 'cover', // 如果需要的话,设置背景图片大小// 'background-position': 'center', // 如果需要的话,设置背景图片位置// 'background-repeat': 'no-repeat', // 禁止背景图片重复}"><img :src="item.image" :alt="item.text" /><p class="text-box">{{ item.text }}</p></div></div>
</template>

3.构建瀑布流展示的相关方法

这里需要说明的是:为增加该瀑布流的可复用性,瀑布流数据通过父组件的list进行传递,boxWidth是指盛放瀑布流的盒子宽度,也是通过父组件进行传递,也可个人自己定义。父组件在下面也会给出详细代码。

这里将每个瀑布流里面的盒子设置的间距为右边20,下边20,第一行的数据进行了特殊处理,可根据个人需求调整。

<script setup>
import { ref, reactive, onMounted } from 'vue';
const props = defineProps({list: {type: Array,default: () => {return [];},},boxWidth: {type: String,default: () => {return '';},},
});const width = 226; // 图片宽度
const gap = 20; // 图片上下间距
const rightGap = 20; // 图片右间距
const waterList = ref([]); // 瀑布流数组
const heightList = reactive([]); // 列高度数组// 屏幕宽度需要在 mounted 之后拿到
onBeforeUpdate(() => {// 计算列数console.log('组件里获取的宽度', props.boxWidth);const column = Math.floor(props.boxWidth / width); // 根据盒子的宽度确定列数console.log('计算的列数', column);// 核心内容就是维护每个图片的 left、topfor (let i = 0; i < props.list.length; i++) {// 先铺上第一行(i < column 则表示是第一行)if (i < column) {props.list[i].top = 0;props.list[i].left = i * (width + (i > 0 ? rightGap : 0));// 塞进瀑布流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、topprops.list[i].left = col * (width + rightGap);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>

4.设置瀑布流的相关样式

可根据个人需求进行调整,这里展示的是上方效果图的样式

<style lang="scss" scoped>
.list {position: relative;height: 100%;width: 100%;.item {position: absolute;.text-box {font-weight: 500;font-size: 18px;color: #000000;}img {width: 100%;height: 90%;object-fit: cover;}}
}
</style>

二、创建使用瀑布流的父组件

1.新建父组件,如命名为index.vue

2.创建父组件的展示内容,分为左侧的菜单和右侧的瀑布流内容

isMenuBarFixed为控制左侧菜单根据右侧滚动条进行滑动的属性,menu-bar里面的内容为左侧菜单的内容,works-box为右侧瀑布流的内容,中间的<div style="width: 160px" v-if="isMenuBarFixed"></div>为当左侧菜单脱离文档流的占位内容,关于脱离文档流,想要学习的同学可参考这篇博客:CSS标准文档流和脱离文档流_css脱离文档流-CSDN博客

<template><div class="max-content"><div class="main-content"><div class="works-publicity"><nav class="menu-bar" ref="menuBar" :class="{ fixed: isMenuBarFixed }"><ul style="padding: 0"><liv-for="(item, index) in menuItems":key="index"class="menu-item"@click="setActiveItem(index)":class="{ active: activeIndex === index }"><div class="menu-item-content"><divclass="menu-item-border":class="{ blue: activeIndex === index }"></div><img:src="item.isActive ? item.activeImage : item.image"class="menu-icon"alt=""/><div class="menu-text" :class="{ blue: activeIndex === index }">{{ item.text }}</div></div></li></ul></nav><div style="width: 160px" v-if="isMenuBarFixed"></div><div class="works-box" ref="myDiv"><water-fall :list="list" :boxWidth="boxWidth" class="water-fall" /></div></div></div></div>
</template>

3.父组件的相关方法

控制左侧瀑布流菜单根据右侧滚动条固定的相关关键代码可参考本篇博客的缩略版使用vue3实现右侧瀑布流滑动时左侧菜单的固定与取消固定-CSDN博客

<script setup>
import { cloneDeep } from 'lodash-es';
const config = useRuntimeConfig();const myDiv = ref(null);
const menuBar = ref(null);
const isMenuBarFixed = ref(false);
const boxWidth = ref(''); // 展示瀑布流的盒子的宽度
const menuItems = ref([{text: '第一个',image: '/images/works-publicity/industrial-design.png',activeImage: '/images/works-publicity/industrial-design-active.png',isActive: true,},{text: '第二个',image: '/images/works-publicity/handicrafts.png',activeImage: '/images/works-publicity/handicrafts-active.png',isActive: false,},{text: '第三个',image: '/images/works-publicity/painting.png',activeImage: '/images/works-publicity/painting-active.png',isActive: false,},{text: '第四个',image: '/images/works-publicity/photograph.png',activeImage: '/images/works-publicity/photograph-active.png',isActive: false,},{text: '第五个',image: '/images/works-publicity/geography.png',activeImage: '/images/works-publicity/geography-active.png',isActive: false,},{text: '第六个',image: '/images/works-publicity/tradition.png',activeImage: '/images/works-publicity/tradition-active.png',isActive: false,},
]);
const list = [{height: 450,background: 'red',image: '/images/works-publicity/test1.png',text: '平面作品+李宇轩',},{height: 600,background: 'pink',text: '美术作品+沈佳宜',image: '/images/works-publicity/test2.png',},{height: 450,background: 'blue',image: '/images/works-publicity/test3.png',text: '平面作品+李宇轩',},{height: 350,background: 'green',image: '/images/works-publicity/test4.png',text: '平面作品+李宇轩',},{height: 500,background: 'gray',image: '/images/works-publicity/test5.png',text: '平面作品+李宇轩',},{height: 400,background: '#CC00FF',image: '/images/works-publicity/test6.png',text: '平面作品+李宇轩',},{height: 300,background: 'pink',image: '/images/works-publicity/test7.png',text: '平面作品+李宇轩',},{height: 600,background: '#996666',image: '/images/works-publicity/test8.png',text: '平面作品+李宇轩',},{height: 400,background: 'gray',image: '/images/works-publicity/test9.png',text: '平面作品+李宇轩',},{height: 400,background: '#CC00FF',image: '/images/works-publicity/test10.png',text: '平面作品+李宇轩',},{height: 500,background: 'gray',image: '/images/works-publicity/test11.png',text: '平面作品+李宇轩',},{height: 300,background: '#996666',image: '/images/works-publicity/test12.png',text: '平面作品+李宇轩',},{height: 600,background: 'gray',image: '/images/works-publicity/test13.png',text: '平面作品+李宇轩',},{height: 400,background: '#CC00FF',image: '/images/works-publicity/test1.png',text: '平面作品+李宇轩',},{height: 500,background: 'gray',image: '/images/works-publicity/test2.png',text: '平面作品+李宇轩',},{height: 300,background: '#996666',image: '/images/works-publicity/test3.png',text: '平面作品+李宇轩',},{height: 300,background: 'gray',image: '/images/works-publicity/test4.png',text: '平面作品+李宇轩',},{height: 400,background: '#CC00FF',image: '/images/works-publicity/test5.png',text: '平面作品+李宇轩',},{height: 500,background: 'gray',image: '/images/works-publicity/test6.png',text: '平面作品+李宇轩',},{height: 400,background: '#996666',image: '/images/works-publicity/test7.png',text: '平面作品+李宇轩',},{height: 350,background: 'gray',image: '/images/works-publicity/test8.png',text: '平面作品+李宇轩',},{height: 450,background: '#CC00FF',image: '/images/works-publicity/test9.png',text: '平面作品+李宇轩',},{height: 430,background: 'gray',image: '/images/works-publicity/test10.png',text: '平面作品+李宇轩',},{height: 600,background: '#996666',image: '/images/works-publicity/test11.png',text: '平面作品+李宇轩',},
];
const activeIndex = ref(0);
// 点击左侧菜单栏切换内容
const setActiveItem = (num) => {menuItems.value.forEach((item, idx) => {item.isActive = num === idx;});activeIndex.value = num;
};
// 监听滚动事件
const handleScroll = () => {const scrollTopThreshold = 428;const scrollTop = document.body.scrollTop; // 获取滚动位置if (scrollTop >= scrollTopThreshold) {isMenuBarFixed.value = true;} else {isMenuBarFixed.value = false;}
};onMounted(async () => {await nextTick(); // 等待 DOM 更新boxWidth.value = myDiv.value.offsetWidth; // 确保 myDiv 已经被定义并且 DOM 已经渲染document.body.addEventListener('scroll', handleScroll); // 添加滚动事件监听器
});
// 组件卸载前
onUnmounted(() => {document.body.removeEventListener('scroll', handleScroll()); // 移除滚动事件监听器
});
</script>

4.父组件内容的相关样式

<style lang="scss" scoped>
.works-publicity {display: flex;width: 100%;padding: 20px 0;box-sizing: border-box;.menu-bar,.fixed {position: relative; /* 或者 static,取决于你的布局 */top: 0; /* 确保它在页面顶部开始 */transition: top 0.3s ease; /* 可选的过渡效果 */display: flex;justify-content: space-around; /* 根据需要调整菜单项间距 */list-style: none;padding: 0;.menu-item {display: flex;position: relative;align-items: center; /* 垂直居中图片和文字 */justify-content: center;cursor: pointer; /* 鼠标悬停时改变样式(可选) */width: 160px;height: 136px;text-align: center;border-left: 1px solid #d3dde9;}.menu-icon {width: 32px; /* 根据图标大小调整 */height: 32px; /* 根据图标大小调整 */margin-bottom: 20px; /* 图片和文字之间的间距 */}.menu-item-content {display: flex;align-items: center;flex-direction: column;}.menu-item-border {position: absolute;left: 0; /* 左边框位置 */top: 0; /* 可以根据需要调整 */bottom: 0; /* 可以根据需要调整 */width: 3px; /* 边框宽度 */background-color: transparent; /* 默认透明 */}.menu-item-border.blue {background-color: var(--el-color-primary); /* 激活时变为蓝色 */}.menu-text.blue {color: var(--el-color-primary); /* 激活时文字变为蓝色 */}}.fixed {/* 当固定时 */position: fixed;top: 0;width: 160px; /* 或者你需要的宽度 */z-index: 100; /* 确保它在其他内容之上 *//* 其他样式,可能需要调整以适应固定定位 */}.works-box {display: flex;flex-direction: column;width: 100%;.water-fall {margin-top: 30px;}}
}
</style>

这样,关于瀑布流的展示及滚动条滑动时,左侧菜单的灵活固定就完成啦!

这篇关于vue3瀑布流示例,左侧菜单根据窗口滚动条进行固定和取消固定,实现瀑布流demo的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1004284

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

hdu1043(八数码问题,广搜 + hash(实现状态压缩) )

利用康拓展开将一个排列映射成一个自然数,然后就变成了普通的广搜题。 #include<iostream>#include<algorithm>#include<string>#include<stack>#include<queue>#include<map>#include<stdio.h>#include<stdlib.h>#include<ctype.h>#inclu

禁止平板,iPad长按弹出默认菜单事件

通过监控按下抬起时间差来禁止弹出事件,把以下代码写在要禁止的页面的页面加载事件里面即可     var date;document.addEventListener('touchstart', event => {date = new Date().getTime();});document.addEventListener('touchend', event => {if (new

【C++】_list常用方法解析及模拟实现

相信自己的力量,只要对自己始终保持信心,尽自己最大努力去完成任何事,就算事情最终结果是失败了,努力了也不留遗憾。💓💓💓 目录   ✨说在前面 🍋知识点一:什么是list? •🌰1.list的定义 •🌰2.list的基本特性 •🌰3.常用接口介绍 🍋知识点二:list常用接口 •🌰1.默认成员函数 🔥构造函数(⭐) 🔥析构函数 •🌰2.list对象

【Prometheus】PromQL向量匹配实现不同标签的向量数据进行运算

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯,先赞后看哦~🎈🎈 🏆 作者简介:景天科技苑 🏆《头衔》:大厂架构师,华为云开发者社区专家博主,阿里云开发者社区专家博主,CSDN全栈领域优质创作者,掘金优秀博主,51CTO博客专家等。 🏆《博客》:Python全栈,前后端开发,小程序开发,人工智能,js逆向,App逆向,网络系统安全,数据分析,Django,fastapi

让树莓派智能语音助手实现定时提醒功能

最初的时候是想直接在rasa 的chatbot上实现,因为rasa本身是带有remindschedule模块的。不过经过一番折腾后,忽然发现,chatbot上实现的定时,语音助手不一定会有响应。因为,我目前语音助手的代码设置了长时间无应答会结束对话,这样一来,chatbot定时提醒的触发就不会被语音助手获悉。那怎么让语音助手也具有定时提醒功能呢? 我最后选择的方法是用threading.Time

Android实现任意版本设置默认的锁屏壁纸和桌面壁纸(两张壁纸可不一致)

客户有些需求需要设置默认壁纸和锁屏壁纸  在默认情况下 这两个壁纸是相同的  如果需要默认的锁屏壁纸和桌面壁纸不一样 需要额外修改 Android13实现 替换默认桌面壁纸: 将图片文件替换frameworks/base/core/res/res/drawable-nodpi/default_wallpaper.*  (注意不能是bmp格式) 替换默认锁屏壁纸: 将图片资源放入vendo