uni-app实现瀑布流效果，支持上拉加载更多（修改后可应用于小程序）

这是一个绝对定位方式的瀑布流实现，直接贴上代码了

<template>
	<view class="content">
		<view hidden>
			<block v-for="(a,b) in imgList">
				<block v-for="(item,index) in a">
					<image @load="imageLoad" :data-src="item.src" :src="item.src" mode="widthFix"></image>
				</block>
			</block>
		</view>
		<view>
			<block v-for="(item,index) in imgList1">
				<image :src="item.src" mode="widthFix" :style="`left: ${item.left}upx;top: ${item.top}upx;`"></image>
			</block>
		</view>
	</view>
</template>

<script>
	var colCount //定义列数
	var colHeightArry = [] //定义列高度数组
	var imgWidth = 375 //单张图片的宽度，可通过调整宽度显示不同列数

	colCount = parseInt(750 / imgWidth) //计算出列数，这里是两列

	for (var i = 0; i < colCount; i++) {
		colHeightArry[i] = 0
	}

	export default {
		data() {
			return {
				title: 'Hello',
				imgList: [
					[{
						src: "../../static/1.jpg"
					}, {
						src: "../../static/2.jpg"
					}, {
						src: "../../static/david-travis-554904-unsplash.jpg"
					}, {
						src: "../../static/3.jpg"
					}, {
						src: "../../static/4.jpg"
					}, {
						src: "../../static/5.jpg"
					}, {
						src: "../../static/6.jpg"
					}, {
						src: "../../static/7.jpg"
					}, {
						src: "../../static/8.jpg"
					}, {
						src: "../../static/9.jpg"
					}, {
						src: "../../static/10.jpg"
					}, {
						src: "../../static/11.jpg"
					}, {
						src: "../../static/12.jpg"
					}, {
						src: "../../static/13.jpg"
					}, {
						src: "../../static/14.jpg"
					}, {
						src: "../../static/15.jpg"
					}, {
						src: "../../static/16.jpg"
					}, {
						src: "../../static/17.jpg"
					}, {
						src: "../../static/1569568584_xcx2.jpg"
					}, {
						src: "../../static/18.jpg"
					}, {
						src: "../../static/19.jpg"
					}, {
						src: "../../static/20.jpg"
					}]
				],
				imgList1: []
			}
		},
		onLoad() {

		},
		onReachBottom() {
			var imgList = [{
				src: "../../static/1.jpg"
			}, {
				src: "../../static/2.jpg"
			}, {
				src: "../../static/david-travis-554904-unsplash.jpg"
			}, {
				src: "../../static/3.jpg"
			}, {
				src: "../../static/4.jpg"
			}, {
				src: "../../static/5.jpg"
			}, {
				src: "../../static/6.jpg"
			}, {
				src: "../../static/7.jpg"
			}, {
				src: "../../static/8.jpg"
			}, {
				src: "../../static/9.jpg"
			}, {
				src: "../../static/10.jpg"
			}, {
				src: "../../static/11.jpg"
			}, {
				src: "../../static/12.jpg"
			}, {
				src: "../../static/13.jpg"
			}, {
				src: "../../static/14.jpg"
			}, {
				src: "../../static/15.jpg"
			}, {
				src: "../../static/16.jpg"
			}, {
				src: "../../static/17.jpg"
			}, {
				src: "../../static/1569568584_xcx2.jpg"
			}, {
				src: "../../static/18.jpg"
			}, {
				src: "../../static/19.jpg"
			}, {
				src: "../../static/20.jpg"
			}]
			this.imgList.push(imgList)
		},
		methods: {
			imageLoad(e) {
				var src = e.currentTarget.dataset.src //图片地址
				var width = e.detail.width //图片宽度
				var height = e.detail.height //图片高度
				height = imgWidth * height / width //在设备上实际显示的高度
				var minValue = colHeightArry[0] //定义最小的高度
				var minIndex = 0 //定义最小高度的下标
				for (var i = 0; i < colCount; i++) {
					if (colHeightArry[i] < minValue) { //如果最小高度组数中的值小于最小值
						minValue = colHeightArry[i] //那么认为最小高度数组中的值是真正的最小值
						minIndex = i //最小下标为当前下标
					}
				}
				this.imgList1.push({
					src: src,
					left: minIndex * imgWidth,
					top: minValue,
					height: height
				})
				colHeightArry[minIndex] += height
			}
		}
	}
</script>

<style>
	image {
		position: absolute;
		width: 355upx;
		margin: 10upx;
	}
</style>