Vue实现无限加载瀑布流
作者:immocha 发布时间:2024-05-09 15:23:16
标签:vue,加载,瀑布流
本文实例为大家分享了Vue实现无限加载瀑布流的具体代码,供大家参考,具体内容如下
我做的这个瀑布流放在了一个嵌套页面里,就是类似管理后台的main content中,如果要改成全屏的也很方便,其实更容易些,因为会避开一些在元素上使用onScroll的坑。
通过这个瀑布流,可以掌握以下几个知识点:
1、在元素上监听scroll事件,相对直接在window上监听麻烦一点点;
2、image.onload事件;
3、promiseAll;
4、vue 的 transition-group
这里使用了mockjs来模拟图片数据,然后通过axios来调用图片数据,也可使用其他数据源。
通过计算图片高度,判断把图片加载到哪一列。
如果屏幕还有空余,那就继续加载。
无限滚动加载。
屏幕resize这块没有做,后期可以加上去。
直接贴代码,有问题欢迎切磋。
<template>
<div class="waterfall wf-wrap" ref="waterfall" @scroll="onScroll">
<ul>
<transition-group name="list" tag="li">
<li
v-for="(item,index) in waterfallList"
:key="index"
class="wf-item"
:style="{top:item.top+ 'px',left:item.left+'px', width:item.width+'px', height:item.height + 'px'}"
>
<img :src="item.src" />
</li>
</transition-group>
</ul>
</div>
</template>
<script>
import { getList } from "@/api/demo";
export default {
name: "Waterfall",
data() {
return {
waterfallList: [],
waterfallCol: 5,
colWidth: 236,
marginRight: 10,
marginBottom: 10,
colHeights: [],
listQuery: {
page: 1,
limit: 5,
sort: "+id"
},
loading: false,
show: true
};
},
mounted() {
this.init();
},
methods: {
init() {
// 初始化时,每栏高度都为0
this.colHeights = new Array(this.waterfallCol);
for (let i = 0; i < this.colHeights.length; i++) {
this.colHeights[i] = 0;
}
this.colWidth =
(this.$refs.waterfall.clientWidth -
(this.waterfallCol - 1) * this.marginRight) /
this.waterfallCol;
this.loadImgs();
},
loadImgs() {
this.loading = true;
// 从api获取数据
getList(this.listQuery).then(res => {
let images = res.data.items;
let promiseAll = [],
imgs = [],
total = images.length;
for (let i = 0; i < total; i++) {
promiseAll[i] = new Promise(resolve => {
imgs[i] = new Image();
imgs[i].src = images[i].image_uri;
imgs[i].onload = () => {
let imgData = {};
imgData.height = (imgs[i].height * this.colWidth) / imgs[i].width;
imgData.width = this.colWidth;
imgData.src = images[i].image_uri;
this.waterfallList.push(imgData);
this.rankImgs(imgData);
resolve(imgs[i]);
};
});
}
Promise.all(promiseAll).then(() => {
this.loading = false;
this.loadMore();
});
});
},
loadMore() {
if (
this.$refs.waterfall.clientHeight + this.$refs.waterfall.scrollTop >
this.filterMin().minHeight &&
this.loading == false
) {
this.loading = true;
setTimeout(() => {
this.loadImgs();
}, 200);
}
},
rankImgs(imgData) {
let min = this.filterMin();
imgData.top = min.minHeight;
imgData.left = min.minIndex * (this.colWidth + this.marginRight);
this.colHeights[min.minIndex] += imgData.height + this.marginBottom;
},
filterMin() {
let minHeight = Math.min.apply(null, this.colHeights);
return {
minHeight: minHeight,
minIndex: this.colHeights.indexOf(minHeight)
};
},
onScroll() {
this.loadMore();
}
}
};
</script>
<style lang="scss" scoped>
ul li {
list-style: none;
}
.wf-wrap {
position: relative;
width: 100%;
height: 100%;
overflow: scroll;
}
.wf-item {
position: absolute;
}
.wf-item img {
width: 100%;
height: 100%;
}
.list-enter-active,
.list-leave-active {
transition: all 1s;
}
.list-enter, .list-leave-to
/* .list-leave-active for below version 2.1.8 */ {
opacity: 0;
transform: translateY(30px);
}
</style>
来源:https://blog.csdn.net/immocha/article/details/107159815


猜你喜欢
- 推荐两文:1、支付宝购买流程 2、支付宝卖家流程 支付宝接口提供最新的ASP、ASP.NET、PHP、JSP等目前网络上最流行的源码包文件,
- 本文总结分析了MySQL查询优化的技巧。分享给大家供大家参考,具体如下:熟悉SQL语句的人都清楚,如果要对一个任务进行操作的话,SQL语句可
- // 格式化字符串 Fmt("{0}.[{id}].{name}",{id:1,name:'
- 一、第三方模块的下载与使用1、什么是第三方模块第三方模块是指别人编写的模块第三方模块一般功能都比较强大2、如何安装第三方模块方式一:pip工
- 要求编写登录接口: 1. 输入用户名和密码2.认证成功后显示欢迎信息3.用户名输错,提示用户不存在,重新输入(5次错误,提示尝试次数过多,退
- flask是我学习的第一个python的web框架,在应用flask写完一个应用后,当然是把它部署到我们的服务器上了。首先,准备我们部署项目
- 将一个四位数反向输出massage = '''将一个四位数,反向输出'''N = input
- 一、Tensorlow结构import tensorflow as tfimport numpy as np#创建数据x_data = np
- 现在网上有很多python2写的爬虫抓取网页图片的实例,但不适用新手(新手都使用python3环境,不兼容python2),所以我用Pyth
- Python这些年风头一直很盛,占据了很多领域的位置,Web、大数据、人工智能、运维均有它的身影,甚至图形界面做的也很顺,乃至full-st
- 对于要搜索的元素越多,二分查找速度比简单查找快的更多 这是二分查找算法的优点,但二分算法也有缺点,二分算法只针对有序的列表,这样插入和删除就
- 1、首先安装火狐浏览器有单独文章分享怎么安装2、搭建python环境安装python,安装的时候把path选好,就不用自己在配置,安装方法有
- MYSQLdump参数详解mysqldump备份:mysqldump -u用户名 -p密码 -h主机 数据库 a -w “sql条件” –l
- 环境:windwos 10(1511) 64bit、mysql 5.7.14一、下载mysql1. 在浏览器里打开mysql的官网http:
- 一、Tensorflow安装1、Tensorflow介绍Tensorflow是广泛使用的实现机器学习以及其它涉及大量数学运算的算法库之一。T
- 直接上代码:# -*- coding: utf-8 -*- import Queue import threadingimport urll
- <?xml version="1.0" encoding="utf-8&
- 因为我闲来无事,所以准备找一部电影来看看。 然后我找到了种子搜索网站,可是这类网站的弹窗广告太多,搞得我很烦。所以我就想着自己用python
- 这篇文章主要介绍了基于Python获取照片的GPS位置信息,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要
- Pytorch损失函数torch.nn.NLLLoss()在各种深度学习框架中,我们最常用的损失函数就是交叉熵(torch.nn.Cross