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 (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(); }); }) }, })
样式文件根据自己项目的样式来,主要分为两列。