在线演示地址:点击前往
一,创建一个Waterfall组件
代码如下:
<template>
<div class="waterfall">
<!-- 循环渲染每一列 -->
<div class="waterfall-column" v-for="(column, index) in columns" :key="index">
<!-- 循环渲染每一项 -->
<div class="waterfall-item" v-for="(item, i) in column" :key="i">
<img
width="100%"
:src="item.src" :alt="item.alt"
/>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Waterfall',
props: {
items: {
type: Array,
required: true
},
columnWidth: {
type: Number,
default: 200
},
gutter: {
type: Number,
default: 10
}
},
data() {
return {
columns: [] // 存储每一列的数据
}
},
watch: {
items: {
handler: function (newVal, oldVal) {
this.initColumns() // 监听数据变化,重新计算每一列的数据
},
deep: true,
}
},
mounted() {
this.$nextTick(() => {
this.initColumns() // 初始化计算每一列的数据
window.addEventListener('resize', this.initColumns) // 监听窗口大小变化,重新计算每一列的数据
})
},
beforeUnmount() {
window.removeEventListener('resize', this.initColumns) // 组件销毁时移除监听
},
methods: {
initColumns() {
try{
const containerWidth = this.$el.clientWidth // 获取容器宽度
let columnsCount = Math.floor(containerWidth / (this.columnWidth + this.gutter)) // 计算列数
columnsCount=columnsCount==0?1:columnsCount;
const columns = new Array(columnsCount).fill().map(() => []); // 初始化每一列的数据
this.items.forEach((item, index) => {
const columnIndex = index % columnsCount; // 计算当前项应该放在哪一列
columns[columnIndex].push(item) // 将当前项放入对应的列中
})
this.columns = columns; // 更新每一列的数据
}catch (e) {
console.log(e)
}
}
}
}
</script>
<style scoped >
.waterfall {
display: flex;
flex-wrap: wrap;
margin: -5px;
}
.waterfall-column {
flex: 1;
margin: 5px;
}
.waterfall-item {
margin-bottom: 5px;
overflow: hidden;
position: relative;
}
.waterfall-item .text{
position: absolute;
z-index: 9999;
top: 0px;
right: 0px;
left: 0px;
text-align: center;
background-color: rgba(30, 29, 29, 0.5); /* 设置背景颜色为白色,透明度为0.5 */
color: aliceblue;
transition: 0.3s;
transform: translateY(-100px);
}
.waterfall-item .img{
transition: 0.8s;
}
.waterfall-item .img:hover {
transform: scale(1.2);
}
.waterfall-item:hover .text{
transform: translateY(0px);
}
</style>
二,页面中引入使用
<template>
<div style="width: 100%;min-height: 100vh">
<Waterfall :items="pictureList" :column-width="200" :gutter="100" />
</div>
</template>
<script lang="ts" setup>
import Waterfall from './Waterfall'
const pictureList=[
{alt:'张苹果博客',src:'https://www.vae.zhangweicheng.xyz/applePicture/vae/9d87323d-354f-4da6-b009-8eba579aaa04.png'},
{alt:'张苹果博客',src:'https://www.vae.zhangweicheng.xyz/apple_Article_ShouTu/vae/ce1cb87d-bf4f-4612-a3e8-833b4114d974.png'},
{alt:'张苹果博客',src:'https://www.vae.zhangweicheng.xyz/applePicture/vae/9d87323d-354f-4da6-b009-8eba579aaa04.png'},
{alt:'张苹果博客',src:'https://www.vae.zhangweicheng.xyz/apple_Article_ShouTu/vae/ce1cb87d-bf4f-4612-a3e8-833b4114d974.png'},
{alt:'张苹果博客',src:'https://www.vae.zhangweicheng.xyz/applePicture/vae/9d87323d-354f-4da6-b009-8eba579aaa04.png'},
{alt:'张苹果博客',src:'https://www.vae.zhangweicheng.xyz/apple_Article_ShouTu/vae/ce1cb87d-bf4f-4612-a3e8-833b4114d974.png'},
{alt:'张苹果博客',src:'https://www.vae.zhangweicheng.xyz/apple_Article_ShouTu/vae/ce1cb87d-bf4f-4612-a3e8-833b4114d974.png'},
{alt:'张苹果博客',src:'https://www.vae.zhangweicheng.xyz/apple_Article_ShouTu/vae/ce1cb87d-bf4f-4612-a3e8-833b4114d974.png'},
{alt:'张苹果博客',src:'https://www.vae.zhangweicheng.xyz/apple_Article_ShouTu/vae/ce1cb87d-bf4f-4612-a3e8-833b4114d974.png'},
{alt:'张苹果博客',src:'https://www.vae.zhangweicheng.xyz/applePicture/vae/9d87323d-354f-4da6-b009-8eba579aaa04.png'},
{alt:'张苹果博客',src:'https://www.vae.zhangweicheng.xyz/applePicture/vae/9d87323d-354f-4da6-b009-8eba579aaa04.png'},
{alt:'张苹果博客',src:'https://www.vae.zhangweicheng.xyz/apple_Article_ShouTu/vae/ce1cb87d-bf4f-4612-a3e8-833b4114d974.png'},
{alt:'张苹果博客',src:'https://www.vae.zhangweicheng.xyz/applePicture/vae/9d87323d-354f-4da6-b009-8eba579aaa04.png'},
{alt:'张苹果博客',src:'https://www.vae.zhangweicheng.xyz/applePicture/vae/9d87323d-354f-4da6-b009-8eba579aaa04.png'},
{alt:'张苹果博客',src:'https://www.vae.zhangweicheng.xyz/apple_Article_ShouTu/vae/ce1cb87d-bf4f-4612-a3e8-833b4114d974.png'},
{alt:'张苹果博客',src:'https://www.vae.zhangweicheng.xyz/applePicture/vae/9d87323d-354f-4da6-b009-8eba579aaa04.png'},
{alt:'张苹果博客',src:'https://www.vae.zhangweicheng.xyz/apple_Article_ShouTu/vae/ce1cb87d-bf4f-4612-a3e8-833b4114d974.png'},
{alt:'张苹果博客',src:'https://www.vae.zhangweicheng.xyz/applePicture/vae/9d87323d-354f-4da6-b009-8eba579aaa04.png'},
{alt:'张苹果博客',src:'https://www.vae.zhangweicheng.xyz/apple_Article_ShouTu/vae/ce1cb87d-bf4f-4612-a3e8-833b4114d974.png'},
{alt:'张苹果博客',src:'https://www.vae.zhangweicheng.xyz/apple_Article_ShouTu/vae/ce1cb87d-bf4f-4612-a3e8-833b4114d974.png'},
{alt:'张苹果博客',src:'https://www.vae.zhangweicheng.xyz/apple_Article_ShouTu/vae/ce1cb87d-bf4f-4612-a3e8-833b4114d974.png'},
{alt:'张苹果博客',src:'https://www.vae.zhangweicheng.xyz/apple_Article_ShouTu/vae/ce1cb87d-bf4f-4612-a3e8-833b4114d974.png'},
];
</script>
<style scoped>
</style>
更多信息请访问:张苹果博客
标签:src,www,Vue,xyz,vae,瀑布,alt,png,图片 From: https://www.cnblogs.com/zhangapple/p/18034063