wxml文件
<view class="container">
<view class="left-item">
<view class="item"></view>
</view>
<view class="right-item">
<view class="item"></view>
</view>
</view>
js文件
let leftHeight = 0, rightHeight = 0; //分别定义左右两边的高度
let query;
page({
data:{
list: [], //通过接口获取的数组
leftList:[], //左边数组
rightList:[], //右边数组
},
//瀑布流布局
async waterfallFlow(){ //在获取list后调用
const {list,leftList,rightList} =this.data;
query = wx.createSelectorQuery();
for (let item of list) {
leftHeight <= rightHeight ? leftList.push(item) : rightList.push(item); //判断两边高度,来觉得添加到那边
await this.getBoxHeight(leftList, rightList);
}
},
getBoxHeight(leftList,rightList){
return new Promise((resolve,reject)=>{
this.setData({ leftList, rightList });
query.select('.left-item').boundingClientRect();
query.select('.right-item').boundingClientRect();
query.exec((res) => {
leftHeight = res[0].height; //获取左边列表的高度
rightHeight = res[1].height; //获取右边列表的高度
resolve();
});
})
},
})
样式文件根据自己项目的样式来,主要分为两列。