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

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

uniapp简单计算实现瀑布流原来这么容易(无数据加载问题)_第1张图片

 template部分

  左边部分

  右边部分

 

  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
							}
						}
					})
				})
			}

你可能感兴趣的:(前端uniapp常用功能学习,uni-app,前端,html,javascript,css)