小程序瀑布流

效果:

一开始的思路是使用第三方插件，但是尝试了两个插件都不行，使用Hbuild VUE写的项目，目前还是不会使用插件 sad
用别的方案吧：
将数据源图片数组拆成左右两个数组，分别渲染这两个数组就行了。这样会存在一个问题：如果左边数组里面的图片很高，右边数组里面的图片很矮，那么左边的高度就比右边高很多：

怎么解决呢？比较左右最大高度，如果左边高度-右边高度 > 左边最后一张图的高度
那么就把左边的最后一张图挪到右边
比较高度的代码：

compareHeight() {
				let query = uni.createSelectorQuery().in(this)
				let res = []
				query.selectAll('.leftLast, .rightLast').boundingClientRect(data => {
					console.log('容器位置', data)
					let leftItem = data[0]
					let rightItem = data[1]
					if (leftItem.bottom - rightItem.bottom > leftItem.height) {
						this.moveLastImg('toRight')
					} else if (rightItem.bottom - leftItem.bottom > rightItem.height) {
						this.moveLastImg('toLeft')
					}
				}).exec();
			},

挪动最后一张image的代码：

moveLastImg(position) {
				if (position == 'toRight') {
					let item = this.leftArr.pop()
					this.rightArr.push(item)
				} else if (position == 'toLeft') {
					let item = this.rightArr.pop()
					this.leftArr.push(item)
				}
			},

这个比较左右两边高度的代码compareHeight 需要在 onReachBottom 和 onReady的时候调用，如果只在onReady调用，有时候，左右的高度还是相差很大

但是，调用moveLastImg 移动了图片item在源数组中的位置，点击的时候previewImage 给的下标就错乱了，怎么办呢？在初始化拆分数组之前，先给每张图片绑定index,点击图片的时候，直接取这个index就不会错乱了：
绑定index:

bindIndex() {
				let res = []
				this.imgArray.forEach((item, index) => {
					let imgItem = {
						imgUrl: item,
						index: index
					}
					res.push(imgItem)
				})
				return res
			},

xml结构：

<view class="root" :style="{'padding-top':navH + 'px'}">
		<view class="leftBox" id="lb">
			<block v-for="(item, index) in leftArr">
				<image :src="item.imgUrl" class="schoolImg" mode="widthFix" @tap="imgTap(item)"
					:class="index == leftArr.length - 1 ? 'leftLast' : ''" id="l-{{index}}"></image>
			</block>

		</view>
		<view class="rightBox" id="rb">
			<block v-for="(item, index) in rightArr">
				<image :src="item.imgUrl" class="schoolImg" mode="widthFix" @tap="imgTap(item)"
					:class="index == rightArr.length - 1 ? 'rightLast' : ''"></image>
			</block>

		</view>

	</view>