微信小程序瀑布流布局

<view class="container">
<view class="left-item">
<view class="item"></view>
</view>
<view class="right-item">
<view class="item"></view>
</view>
</view>

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 (const 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();
});
})
},
})