uniapp简单计算实现瀑布流原来这么容易（无数据加载问题）

效果图如下图，样式可根据需求自行调整

 template部分

  左边部分

<view class="item-masonry" v-for="(item,index) in leftList" :key="index" @click="getToGoods(item.id)">

  右边部分

<view class="item-masonry" v-for="(item,index) in rightList" :key="index" @click="getToGoods(item.id)">

 

  script部分

  计算函数

doList() {
				const that = this
				this.listDatas.forEach(res => {
					// 获取图片宽高
					uni.getImageInfo({
						src: this.$api.config.cdnurl + res.image,
						success: (image) => {
							// console.log(image)
							// 计算图片渲染高度
							let showH = (50 * image.height) / image.width
							// 判断左右盒子高度
							if (that.leftH <= that.rightH) {
								that.leftList.push(res)
								that.leftH += showH
							} else {
								that.rightList.push(res)
								that.rightH += showH
							}
						}
					})
				})
			}