uniapp瀑布列表我看了下好像没什么好用的插件，或者都是一些计算麻烦的，还有就是样式做的定位不太好分页。所以自己写了一个，比较简单,支持做分页。设定几列，我就添加几个数组，然后给高度最短的列push数据。最核心的代码也就那么几行，反正挺简单，代码里都有注释，直接整个粘贴过去看效果
<template>
<view class="list">
<view class="list-column" v-for="(item, index) in list" :key="index">
<!-- 这个盒子一定要，计算每列总高度的 -->
<view :class="'column' + index">
<view class="detail" v-for="(item1, i) in item" :key="i">
<image :src="item1.img"></image>
<view>{{ item1.title }}</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
column: 3, //列数需大于0，可随意切换
list: [], //数据列表
heightList: [], //保存每列的高度
timer: null, //定时器需要延时获取dom高度
};
},
async onLoad() {
await this.getColumnList();
await this.getList();
},
onUnload() {
clearInterval(this.timer);
},
onReachBottom() {
// 分页逻辑按照自己需求写
this.getList()
},
methods: {
// 初始化数组的列数，添加空数组
getColumnList() {
this.list = [];
for (let i = 0; i < this.column; i++) {
this.list.push([]);
}
},
// 获取接口数据
getList() {
// 假如这里是接口获取的数组
let data = [
{
img: "https://t8.baidu.com/it/u=3272525572,1712724531&fm=3035&app=3035&size=f242,150&n=0&f=JPEG&fmt=auto?s=B39CA76E7560451B980B337E0300D07C&sec=1729184400&t=de3a34366e8f44e2c1544e1bd92f1474",
title: "标题标题标题标题标题标题标题标题标题标题标题标题标题标题",
},
{
img: "https://t8.baidu.com/it/u=3897666234,2873419740&fm=217&app=126&size=f242,150&n=0&f=JPEG&fmt=auto?s=AE62C214FE226B03460E5FD80300B0BF&sec=1729184400&t=0baba2ab4af4b3a863f311d5cbf8895f",
title: "标题题标题",
},
{
img: "https://t7.baidu.com/it/u=3257192411,2459472063&fm=217&app=126&size=f242,150&n=0&f=JPEG&fmt=auto?s=24AC60B4DC422ED626181D09030060D3&sec=1729184400&t=ce9d5b84064de942e7144fcce84a177a",
title: "标标题标标题标标题标标题",
},
{
img: "https://t7.baidu.com/it/u=3562468818,2226789446&fm=3031&app=3031&size=f242,150&n=0&f=JPEG&fmt=auto?s=40125F98770451E74A04DC50030070F1&sec=1729184400&t=8d26ee442dab4e4e29706cbb972d1ef3",
title: "标题标题标题题标题标题标题标题标题",
},
{
img: "https://t9.baidu.com/it/u=3270408099,2255924736&fm=3031&app=3031&size=f242,150&n=0&f=JPEG&fmt=auto?s=73BF27660F80496242CFE37B0300E07A&sec=1729184400&t=198738e9dda29c2d3024af117802a080",
title: "标题标题标题标题标题标题标题标题标题标题标题标题标题标题",
},
{
img: "https://t9.baidu.com/it/u=922375208,550964998&fm=3031&app=3031&size=f242,150&n=0&f=JPEG&fmt=auto?s=E192EF3E8BCF444B5AD7C0C7020020BB&sec=1729184400&t=caa743d6e8acac9462dee574cd8239a1",
title: "标题标题标题标题标题标题标题标题",
},
{
img: "https://t8.baidu.com/it/u=3272525572,1712724531&fm=3035&app=3035&size=f242,150&n=0&f=JPEG&fmt=auto?s=B39CA76E7560451B980B337E0300D07C&sec=1729184400&t=de3a34366e8f44e2c1544e1bd92f1474",
title: "标题标题标题标题标题标题标题标题标题标题标题标题标题标题",
},
{
img: "https://t8.baidu.com/it/u=3897666234,2873419740&fm=217&app=126&size=f242,150&n=0&f=JPEG&fmt=auto?s=AE62C214FE226B03460E5FD80300B0BF&sec=1729184400&t=0baba2ab4af4b3a863f311d5cbf8895f",
title: "标题题标题标题标题标题",
}
];
//接口拿到数据后开始逐步渲染
if (data && data.length) {
for (let i = 0; i < data.length; i++) {
this.timer = setTimeout(() => {
this.getDom(data[i]); //将单个数据添加到各个列中
}, i * 20); //这个20毫秒延迟可以改大看尾部添加的效果
}
}
},
// 获取哪一列的高度最小
getDom(i) {
this.heightList = [];
const query = uni.createSelectorQuery().in(this);
this.list.forEach((i, index) => {
query
.select(`.column${index}`)
.boundingClientRect((data) => {
this.heightList.push({ index, height: data.height }); //获取每一列dom的高度
this.heightList = Array.from(
new Set(this.heightList.map(JSON.stringify))
).map(JSON.parse);
})
.exec();
});
let min = Math.min(...this.heightList.map((obj) => obj.height)); //几列中对比哪个最小
let minValue = this.heightList.findIndex((j) => j.height == min);
this.list[minValue].push(i); //将列高度最小的，添加单条数据到对应的数组
}
}
};
</script>
<style>
.list {
display: flex;
padding: 32rpx;
}
.list-column {
flex: 1;
margin-right: 32rpx;
}
.list-column:last-child {
margin-right: 0;
}
.detail {
margin-bottom: 32rpx;
}
.detail image {
width: 100%;
}
</style>
总结：就是获取dom比较大小，然后获取dom需要一点点的延迟。要是vue的项目可以改改获取dom高度的方法应该就可以使用了