详解）
⼀、思路分析和效果图
⽤vue来实现⼀个瀑布流效果，加载⽹络图⽚，同时有下拉刷新和上拉加载更多功能效果。然后针对这⼏个效果的实现，捋下思路：
根据加载数据的顺序，依次追加标签展⽰效果；
选择哪种⽅式实现瀑布流，这⾥选择绝对定位⽅式；
关键问题：由于每张图⽚的宽⾼不⼀样，⽽瀑布流中要求所有图⽚的宽度⼀致，⾼度随宽度等⽐缩放。⽽且由于图⽚的加载是异步延迟。在不知道图⽚⾼度的情况下，每个图⽚所在的item盒⼦不好绝对定位。因此在渲染页⾯前先获取所有图⽚的⾼度，是解决问题的关键点！这⾥选择⽤JS中的Image类，通过预加载图⽚的⽅式提前获取图⽚宽⾼，另外通过⼀个临时变量来计算是否所有图⽚的⾼度已经得到。当所有的图⽚⾼度获取后，开始渲染页⾯。
页⾯渲染后，获取所有图⽚所在的盒⼦，循环计算盒⼦的⾼度，开始设置每个盒⼦item的绝对定位。
页⾯渲染时，会出现闪烁的现象。如何解决这个问题呢？这⾥⽤了⼀个动画样式。不过在第⼀次加载的时候，还是会有⼀点闪烁的感觉。
然后就是下拉刷新和上拉加载更多的效果，这⾥⽤了有赞的vant组件PullRefresh和List这套组合组件来实现。
先看个效果动图：
静态截图：
⼆、具体实现步骤
2.1、页⾯结构设计，测试数据准备。
本地准备⼀个json⽂件数据，放在项⽬public⽂件夹下。注意，本地测试数据必须放在public⽂件夹下，⽹络请求时才能请求到数据，这是vue3.x。新增加⼀个axios依赖包，⽤来进⾏⽹络请求。部分截图，及关键代码：
//数据请求
getDataList(){
this.$("/json/dataList.json").then((res)=>{
let list = res.data.data ? res.data.data: [];
if (list.length > 0){
//从list中取pageSize条数据出来
var tempList = [];
for (let i = 0; i < this.pageSize; i++){
if (list.length > 0){
let tempIndex = parseInt(Math.random() * 1000) % list.length;
tempList.push(list[tempIndex]);
list.splice(tempIndex, 1);
}
}
this.loadImagesHeight(tempList); //模拟预加载图⽚，获取图⽚⾼度
}
else {
this.loadImagesHeight(list);
}
}).catch((res)=>{
console.log("..fail: ", res);
this.$toast.clear();
this.isLoading = false; //下拉刷新请求完成
this.loading = false; //上拉加载更多请求完成
})
},
2.2、预加载图⽚，存储图⽚⾼度
获取数据后，遍历数据数组，预加载图⽚，计算图⽚缩放后的⾼度，存储起来。同时由于图⽚加载是异步加载，所以⽤变量计数，当最后⼀个图⽚加载完成后，开始渲染页⾯。
loadImagesHeight(list){
var count = 0; //⽤来计数，表⽰是否所有图⽚⾼度已经获取
list.forEach((item, index)=>{
//创建图⽚对象，加载图⽚，计算图⽚⾼度
var img = new Image();
img.src = ver;
count++;
连姆 麦肯泰尔if (e.type == 'load'){ //图⽚加载成功
//计算图⽚缩放后的⾼度：图⽚原⾼度/原宽度 = 缩放后⾼度/缩放后宽度
list[index].imgHeight = und(img.height * this.boxWidth / img.width);
// console.log('index: ', index, ', load suc, imgHeiht: ', list[index].imgHeight);
}
else{ //图⽚加载失败，给⼀个默认⾼度50
list[index].imgHeight = 50;
console.log("index： ", index, "，加载报错：", e);
}
//加载完成最后⼀个图⽚⾼度，开始下⼀步数据处理
if (count == list.length){
}
}
电脑网速慢是什么原因})
},
2.3、渲染页⾯，设置绝对定位
所有图⽚通过预加载获取图⽚⾼度后，开始渲染页⾯。然后遍历所有图⽚所在盒⼦标签，获取盒⼦⾼度，设置每个盒⼦的绝对定位。
resolveDataList(list){ //处理数据
//下拉刷新，清空原数据
if (this.pageIndex <= 1){
this.itemCount = 0;
this.dataList = [];
this.lastRowHeights = [0, 0]; //存储每列的最后⼀⾏⾼度清0
}
if (list.length >= this.pageSize){
核酸报告手机上怎么查this.pageIndex++; //还有下⼀页
}
else{
this.finished = true; //当前tab类型下所有数据已经加载完成
}
//合并新⽼两个数组数据
this.dataList = [...this.dataList, ...list];
//判断页⾯是否有数据
this.haveData = this.dataList.length > 0 ? 2 : 1;
this.isLoading = false; //下拉刷新请求完成
this.loading = false; //上拉加载更多请求完成
console.log("...datalist: ", this.dataList);
console.log("...this.isLoading: ", this.isLoading)
this.$nextTick(()=>{
李程彬setTimeout(()=>{
/
/渲染完成，计算每个item宽⾼，设置标签坐标定位
this.setItemElementPosition();
this.isLoading = false; //下拉刷新请求完成
this.loading = false; //上拉加载更多请求完成
}, 1000)
});
},
//获取每个item标签⾼度，设置item的定位
setItemElementPosition(){
let parentEle = ElementById('data-list-box');
let boxEles = ElementsByClassName("data-item");
for (let i = this.itemCount; i < boxEles.length; i++){
let tempEle = boxEles[i];
//上⼀个标签最⼩⾼度的列索引
let curColIndex = MinHeightIndex(this.lastRowHeights);
let boxTop = this.lastRowHeights[curColIndex] + this.boxMargin;
let boxLeft = curColIndex * (this.boxWidth + this.boxMargin) + this.boxMargin;
tempEle.style.left = boxLeft + 'px';
社保卡医保卡p = boxTop + 'px';
this.lastRowHeights[curColIndex] = boxTop + tempEle.offsetHeight;
// console.log('i = ', i, ', boxTop: ', boxTop, ', eleHeight: ', tempEle.offsetHeight);
}
this.itemCount = boxEles.length;
//修改⽗级标签的⾼度
let maxHeight = Math.max.apply(null, this.lastRowHeights);
成毅个人资料parentEle.style.height = maxHeight + 'px';
this.$toast.clear();
console.log("...boxEles: ", boxEles.length, ", maxH: ", maxHeight);
},
2.4、其他说明
其他页⾯中如下拉刷新，和上拉加载更多等功能，使⽤了有赞的组件库中的PullRefresh 和 List这⼀套组合组件。感觉效果挺棒的，使⽤步骤也简单。另外就是在页⾯渲染时，会出现页⾯闪烁的现象，后⾯使⽤了⼀个css动画处理了这个现象，效果好了很多。但是在第⼀次加载的时候，还是有轻微的闪烁现象。等后⾯到更好的⽅法，再更新。
总结
以上所述是⼩编给⼤家介绍的vue实现⽹络图⽚瀑布流 + 下拉刷新 + 上拉加载更多(步骤详解)，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持！
如果你觉得本⽂对你有帮助，欢迎转载，烦请注明出处，谢谢！
发布评论