vue瀑布流,vue3瀑布流
这篇文章主要为大家详细介绍了某视频剪辑软件实现无限加载瀑布流，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现无限加载瀑布流的具体代码，供大家参考，具体内容如下
我做的这个瀑布流放在了一个嵌套页面里，就是类似管理后台的主要内容中，如果要改成全屏的也很方便，其实更容易些，因为会避开一些在元素上使用滚动时触发的坑。
通过这个瀑布流，可以掌握以下几个知识点：
1、在元素上监听卷起事件，相对直接在窗户上监听麻烦一点点；
2、图片上传事件；
3、承诺一切；
4、vue的过渡组
这里使用了mockjs来模拟图片数据，然后通过爱可信来调用图片数据，也可使用其他数据源。
通过计算图片高度，判断把图片加载到哪一列。
如果屏幕还有空余，那就继续加载。
无限滚动加载。
屏幕调整大小这块没有做，后期可以加上去。
直接贴代码，有问题欢迎切磋。
模板
div class=瀑布wf-wrap ref=瀑布@scroll=onScroll
保险商实验所
transition-group name= list tag= Li
里
瀑布列表中的v-for=(项目，索引)
:key=index
工作流-项目
:style={top:item.top px ，left:item.left px ，width:item.width px ，height:item.height px}
img :src=item.src /
/李
/过渡-组
/ul
/div
/模板
脚本
从" @/api/demo "导入{ getList }；
导出默认值{
名称："瀑布",
data() {
返回{
瀑布师：[],
瀑布：5,
列宽：236,
边缘右侧：10
marginBottom: 10，
科尔海茨：[],
列表查询：{
第一页，
限制：5,
排序：" id "
},
加载：假，
显示：真实
};
},
已安装(){
这个。init()；
},
方法：{
init() {
//初始化时，每栏高度都为0
this.colHeights=新数组(这个。waterfallcol)；
对于(设I=0；我这个。科尔高地。长度；i ) {
这个。列高度[I]=0；
}
this.colWidth=
（这个参考文献。瀑布。客户端宽度-
(这个。waterfallcol-1)*这个。右边距)/
这个瀑布
这个。loadimgs()；
},
loadImgs() {
this.loading=true
//从美国石油学会(美国石油协会)获取数据
getList(this.listQuery).然后(res={
让图像=分辨率数据。物品；
let promiseAll=[]，
imgs=[]，
总计=图像.长度
对于(设I=0；我总计；i ) {
promiseAll[i]=新的承诺(resolve={
imgs[I]=new Image()；
国际货币基金组织.src=images[i].图像_ uri
国际货币基金组织.onload=()={
设img数据={ }；
imgData.height=(imgs[i].height * this.colWidth)/imgs[i].宽度；
img数据。宽度=这个。列宽度；
imgData.src=images[i].图像_ uri
这个。瀑布主义者。推送(img数据)；
这个。排名img(img数据)；
resolve(imgs[I])；
};
});
}
Promise.all .然后(()={
this.loading=false
这个。加载更多()；
});
});
},
loadMore() {
如果（
这个参考文献。瀑布。客户端高度this .$参考文献。故障。滚动顶部
this.filterMin().米恩海特
this.loading==false
) {
this.loading=true
setTimeout(()={
这个。loadimgs()；
}, 200);
}
},
rankImgs(imgData) {
设min=this。filter min()；
img数据。top=min。最小高度；
img数据。左=最小。minindex *(这个。这个栏宽。右边距)；
这个。高度[最小值。minindex]=img数据。高度这个。边距底部；
},
filterMin() {
设minHeight=Math.min.apply(null，this。山坳高地)；
返回{
minHeight: minHeight，
最小指数：这个。科尔高地。(最小高度)的索引
};
},
onScroll() {
这个。加载更多()；
}
}
};
/脚本
样式lang=scss 范围
ul li {
列表样式：无；
}。wf-wrap {
位置：相对；
宽度：100%;
身高：100%;
溢出：滚动；
}。wf-项目{
位置：绝对；
}。wf-项目管理{
宽度：100%;
身高：100%;
}。列表-输入-活动，列表-保持活动状态{
过渡：全1;
}。列表-输入，列表-留给
/* .2.1.8 */{
不透明度：0;
transform:平移y(30px)；
}
/风格
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。