uniapp 简单实现瀑布流

效果图：


全部代码：

<template>
	<view class="content">
		<view hidden> <!--此处不显示，只作循环调用函数imageLoad-->
			<block v-for="(item,index) in imgList" :key="index">
					<image @load="imageLoad" :src="srcurl + item.imgname" :data-src="srcurl + item.imgname"  mode="widthFix"></image>
			</block>			
		</view>
		<view>  <!--此处用于显示-->
			<block v-for="(item,index) in imgList1" :key="index">
				<image @click="clickimg" :src="item.src" :data-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 {				
				imgList: [],
				imgList1: [],
				num : 1,
				srcurl:''
			}
		},
		
		onLoad() {
			let url = uni.getStorageSync('url')  //从缓存读取
			this.srcurl = url + '/imgup/'  //图片的网址，用于页面渲染 :src="srcurl + name"
			this.getInfo('正在加载数据...')	
		},
		
		/* 下拉刷新 */
		onPullDownRefresh() {
			this.num = 1
			this.getInfo('正在加载数据...')
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		
		/* 上拉触底事件 */
		onReachBottom: function() { 
			if (this.hasMoreData) {
				this.getInfo('加载更多数据')
			} else {
				uni.showToast({
				  title: '没有更多数据',
				  icon:'none'
				})
			}      
		},
		
		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
			},
			
			// 分页加载数据
			getInfo: function (message) {
				let that = this
				let url = uni.getStorageSync('url') //从缓存读取
				let userid = uni.getStorageSync('userid') //从缓存读取
				uni.showLoading({	//显示 loading 提示框
				  title: message,
				})
				uni.request({
					url: url + '/waterfall',
					data: {					
						pagenum : that.num ,   //赋值并传到后端
						userid : userid
					},
					method: 'GET',
					header: { 'content-type': 'application/json' },
					success: function (res) {  //请求成功
						var imgurlTemp = that.imgList						
						if (res.data.length >= 0) {						  
							uni.hideLoading()		//隐藏 loading 提示框
							if (that.num == 1) {
								imgurlTemp = []
							}
							var imgurl = res.data
							console.log(imgurl)
							if (imgurl.length < 10) {  //对应后端接口分页查询的记录条数  
								that.imgList = imgurlTemp.concat(imgurl)
								that.hasMoreData = false
							} else {
								that.imgList = imgurlTemp.concat(imgurl)
								that.hasMoreData = true
								that.num = that.num + 1		    
							}
						}
					}
				})
			},
			
			// 图片预览
			clickimg(event) {
				var imgurl = event.currentTarget.dataset.src
				var currentUrl = event.currentTarget.dataset.src   //获取点击图片的地址, **对应<template>里面的 :data-src="item.src"					
				uni.previewImage({       
					urls: [imgurl],    //这里是单图 . 需要预览的全部图片地址,这个数组是必须的,要用[] 					
					current: currentUrl, //当前显示图片的地址					
				})  
			},
		}
	}
</script>

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