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
相关文章
- 这篇文章主要介绍了vue中activated的用法,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2021-01-03
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
这篇文章主要介绍了基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-02-23- 这篇文章主要介绍了Vue基于localStorage存储信息代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-11-16
- 这篇文章主要介绍了vue 监听 Treeselect 选择项的改变操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
Antd-vue Table组件添加Click事件,实现点击某行数据教程
这篇文章主要介绍了Antd-vue Table组件添加Click事件,实现点击某行数据教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-17- 这篇文章主要介绍了vue 实现动态路由的方法,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-06
- 这篇文章主要介绍了Vue组件跨层级获取组件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-28
用js的document.write输出的广告无阻塞加载的方法
一、广告代码分析很多第三方的广告系统都是使用document.write来加载广告,如下面的一个javascript的广告链接。复制代码 代码如下:<script type="text/javascript" src="http://gg.5173.com/adpolestar/5173/;ap=2EBE5...2014-06-07- 这篇文章主要介绍了vue 获取到数据但却渲染不到页面上的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-11-19
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
这篇文章主要介绍了antdesign-vue结合sortablejs实现两个table相互拖拽排序功能,本文通过实例图文相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-01-09- 这篇文章主要介绍了vue treeselect获取当前选中项的label实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
这篇文章主要介绍了vuejs element table 表格添加行,修改,单独删除行,批量删除行操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-18- 这篇文章主要给大家介绍了关于Vue中slot-scope的深入理解,这个教程非常适合初学者,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-17
- 最常见的多环境配置,就是开发环境配置,和生产环境配置,本文主要介绍了vue项目多环境配置的实现,感兴趣的可以了解一下...2021-07-20
- 这篇文章主要介绍了Vue 3.0 中 jsx 语法使用,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2020-11-13
vue项目页面嵌入代码块vue-prism-editor的实现
这篇文章主要介绍了vue项目页面嵌入代码块vue-prism-editor的实现,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-10-30vue Treeselect下拉树只能选择第N级元素实现代码
这篇文章主要介绍了vue Treeselect下拉树只能选择第N级元素实现代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01- 当页面打开时我们需要执行一些操作,这个时候如果我们选择使用jquery的话,需要重写他的3中方法,自我感觉没什么区 别,看个人喜好了,第二种感觉比较简单明了: 第一种: 复制代码 代码如下: <script type="text/javas...2014-06-07
- 这篇文章主要为大家详细介绍了vue实现同时设置多个倒计时,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-05-20
解决vue的router组件component在import时不能使用变量问题
这篇文章主要介绍了解决vue的router组件component在import时不能使用变量问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-27