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>
更多信息请访问:张苹果博客
Vue实现图片瀑布流的更多相关文章
- 基于.NetCore开发博客项目 StarBlog - (10) 图片瀑布流
系列文章 基于.NetCore开发博客项目 StarBlog - (1) 为什么需要自己写一个博客? 基于.NetCore开发博客项目 StarBlog - (2) 环境准备和创建项目 基于.NetC ...
- 代码: 两列图片瀑布流(一次后台取数据,图片懒加载。下拉后分批显示图片。图片高度未知,当图片onload后才显示容器)
代码: 两列图片瀑布流(一次后台取数据,无ajax,图片懒加载.下拉后分批显示图片.图片高度未知,当图片onload后才显示容器) [思路]: 图片瀑布流,网上代码有多种实现方式,也有各类插件.没找到 ...
- 利用LruCache载入网络图片实现图片瀑布流效果(改进版)
PS: 2015年1月20日21:37:27 关于LoadImageAsyncTask和checkAllImageViewVisibility可能有点小bug 改动后的代码请參见升级版本号的代码 ht ...
- 图片瀑布流,so easy!
什么是图片瀑布流 用一张花瓣网页的图片布局可以很清楚看出图片瀑布流的样子: 简单来说,就是有很多图片平铺在页面上,每张图片的宽度相同,但是高度不同,这样错落有致的排列出 n 列的样子很像瀑布,于是就有 ...
- Jquery实现图片瀑布流思路-简单版
目录 Jquery实现图片瀑布流思路-简单版 1.预备 2.开始 1.声明 2.主体 3.窗体大小改变事件 Jquery实现图片瀑布流思路-简单版 注意:本篇文章基于知道每张图片的实际尺寸的情况下 特 ...
- js图片瀑布流效果
要实现图片瀑布流效果,首先得准备几张图片. html的部分比较简单就是将图片加载到浏览器就可以了 代码如下(注意放的图片多一点要不然之后无法滑动鼠标就无法达到瀑布流效果): <!DOCTYPE ...
- js 实现图片瀑布流效果,可更改配置参数 带完整版解析代码[waterFall.js]
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS实现图片瀑布流效果 页面需求 1 ...
- vue.js实现瀑布流之vue-waterfall-easy
想必大家应该很多都已经习惯了jquery的DOM操作,jquery的瀑布流实现起来也很容易. 但是,随着时代的发展,随着时代的进步..... 算了算了,扯远了,既然能找到这儿来,肯定是在vue.js上 ...
- vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多
一.思路分析和效果图 用vue来实现一个瀑布流效果,加载网络图片,同时有下拉刷新和上拉加载更多功能效果.然后针对这几个效果的实现,捋下思路: 根据加载数据的顺序,依次追加标签展示效果: 选择哪种方式实 ...
- 用原生JavaScript实现图片瀑布流的浏览效果
学习JS,活跃思维,灵活运用的一个较为典型的学习案例.同一个瀑布流的效果但实现方式却很多,利用递归.冒泡等等手法都可以达到你想要的目的.这次要说的就是利用类似递归来实现此效果的原创方案.此方案个人认为 ...
随机推荐
- miniIO系列文章03---abpvext中集成
在Abp商业版本中已经提供了文件管理模块的,免费版本是没有的,本文将介绍如何使用Minio打造一个自己的文件管理模块. 在项目开始之前,需要先安装一个Minio服务,可以在本地pc或云主机中安装,具体 ...
- P7036 [NWRRC2016] Folding
题目简述 有两个矩形,大小分别是 \(W \times Y\) 和 $ w \times y$.现在我们要通过折叠将两个矩阵变成一样. 思路 part1 已知一条边折叠一次会变成 \(\frac{x} ...
- 加快ios的出包速度
在导出ipa时,通过这几种方法,可以更快地导出ipa来进行测试 不勾选bitcode 在导出ipa时,不勾选bitcode,这样会加快出包的速度,但导出来的ipa会大一些,关于bitcode可查看:& ...
- springboot多模块打包报错问题根因分析:Unable to find main class
问题背景: 项目结构为springboot多模块,其中有四个模块bean.utils.user.ems,其中user和ems模块为主程序,包含启动类,其他两个模块为其服务,提供依赖 问题分析: 查看u ...
- 第二届数字化经济与管理科学国际学术会议(CDEMS 2024)
[经济&管理|录用率高]第二届数字化经济与管理科学国际学术会议(CDEMS 2024) 2024 2nd International Conference on Digital Economy ...
- PaddleHub实战篇{词法分析模型LAC、情感分类ERNIE Tiny}训练、部署【三】
相关文章: 基础知识介绍: [一]ERNIE:飞桨开源开发套件,入门学习,看看行业顶尖持续学习语义理解框架,如何取得世界多个实战的SOTA效果?_汀.的博客-CSDN博客_ernie模型 百度飞桨: ...
- Liunx知识点整理
Linux知识点整理 目录和文件 ls (list)显示当前目录下的文件或目录 a 显示所有文件及目录 (ls内定将文件名或目录名称开头为"."的视为隐藏档,不会列出) l 除文件 ...
- Java 运算符 - 除法
1. 除法运算符 Java中的除法运算符是"/"符号,表示将左侧操作数除以右侧操作数. 2. 整数除法 在Java中,整数除法的结果是一个整数,即只保留除法的整数部分,舍去小数部分 ...
- 时间减去一个小时怎么做 delphi 很方便 看代码
procedure TfrmTongBuTid.Button1Click(Sender: TObject); begin TopStartModifiedTime_dtp.Time := TopSta ...
- .NET 云原生架构师训练营(模块二 基础巩固 EF Core 基础与配置)--学习笔记
2.4.3 EF Core -- 基础与配置 连接字符串 异步编程 日志 DbContext池 类和配置表 属性和列配置 并发token 索引 Entity Framework Core:https: ...