首页 > 其他分享 >Vue实现图片瀑布流

Vue实现图片瀑布流

时间:2024-02-26 12:33:07浏览次数:24  
标签:src www Vue xyz vae 瀑布 alt png 图片

在线演示地址:点击前往

一,创建一个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

相关文章

  • 如何创建vue项目,创建的方式?
    如何创建vue项目,创建的方式:https://blog.csdn.net/weixin_73184582/article/details/130241224?ops_request_misc=&request_id=&biz_id=102&utm_term=%E5%88%9B%E5%BB%BA%E4%B8%80%E4%B8%AAvue%E9%A1%B9%E7%9B%AE&utm_medium=distribute.pc_search_result.none-task-bl......
  • uniapp-vue2-微信小程序,canvas 裁切图片的代码
    <canvasclass="edit-question-canvas"type="2d"id="canvasCuteImage"></canvas>/*.edit-question-canvas{position:absolute;left:-750rpx;width:690rpx;height:100rpx;}样式随便自己写*/......
  • 详细vite创建vue3项目(vue3+vue-router+ts+vite+element-plus+pinia)
    详细vite创建vue3项目(vue3+vue-router+ts+vite+element-plus+pinia):https://blog.csdn.net/qq_44423029/article/details/126378199?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522170891147716800185818285%2522%252C%2522scm%2522%253A%252220140713.130102334..%2......
  • vue3+vite使用vue-pdf-embed或者pdf-vue3预览 PDF 文件(能躲避 XSS 攻击,需要 pdf 文件
    1.使用vue-pdf-embed1.npm安装所需插件[email protected]@0.1.62.封装组件(创建pdfPriview.index文件)<template><divclass="pdf-preview"> <vue-pdf-embed :source="state.source" v-for="pageinstate......
  • vue init webpack 和vue create的几点区别
    vueinitwebpack和vuecreate的几点区别:https://blog.csdn.net/xilejie/article/details/130061075?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522170891269616800184194526%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request......
  • Vue 3 的 setup语法糖到底是什么东西?
    前言我们每天写vue3项目的时候都会使用setup语法糖,但是你有没有思考过下面几个问题。setup语法糖经过编译后是什么样子的?为什么在setup顶层定义的变量可以在template中可以直接使用?为什么import一个组件后就可以直接使用,无需使用components 选项来显式注册组件?vue文件如何渲染......
  • 使用defineAsyncComponent解决Vue3中的动态组件不显示问题
    参考:https://www.php.cn/faq/562208.html之前的写法<component:is='xxx'></component>异步加载组件<template><AsyncComponentv-if="item.data":key="item.data.comId"></AsyncComponent></template>&......
  • Vue3学习(十八) - TreeSelect 树选择
    写在前面本以为可以在家学习一天,结果家里来了客人拜年,就没学习上,有点小遗憾吧。昨天完成从分类管理的前后端代码复制出文档管理的前后端代码,遗留问题是只能选择一级父分类。值得说的是,昨晚的遗留的问题修复了,开心。遗留问题点击父文档,弹出警告,从报错来看那意思就是parent应该......
  • 如何用Airtest实现在图片范围内随机点击
    1.前言前几天有个新手同学在Airtest官群里问了这样一个问题:我是新手,在图片范围内随机点击,用Airtest怎么实现?代码?那我们就以这个问题为例,浅浅聊一下,怎么把需求转化成我们的Airtest代码。2.了解Airtest首先新手同学对Airtest要有以下几点认知:①Airtest是一个图像识别框架......
  • 读取一个图片文件,显示在一个窗口(opencv生成的)
    //下面3行增加在CPP头部#include<opencv2/opencv.hpp>#include<opencv2/highgui/highgui_c.h>usingnamespacecv;//下面的代码添加在功能需要的地方,这个窗口和windows程序的窗口不一样,只是一个简单的将图片显示在一个独立的窗口。//菜单、按钮响应功能都可以......