Vue实现图片瀑布流

在线演示地址：点击前往原文查看

一，创建一个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 >
import Waterfall from './Waterfall'
export default {
  name: 'Waterfall',
  components:{Waterfall},
  data(){
  return{
    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>

更多信息请访问：张苹果博客