uniapp实现瀑布流

<template>
	<view class="container">
		<view class="left" ref="leftColumn">
			<view class="posive" v-for="(item, index) in leftList" :key="index">
				<image :src="item.src" alt="" mode="widthFix" @click="previewImg(item)" />
			</view>
		</view>
		<view class="right" ref="rightColumn">
			<view class="posive" v-for="(item, index) in rightList" :key="index">
				<image :src="item.src" alt="" mode="widthFix" @click="previewImg(item)" />
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 图片列表
				list: [{
						src: "https://inews.gtimg.com/om_bt/OjPq2cnMN_-ivDKjxpCZ2kk_ab8YC5VMnL-0pQ21fUvd4AA/1000"
					},
					{
						src: "https://inews.gtimg.com/om_bt/OjPq2cnMN_-ivDKjxpCZ2kk_ab8YC5VMnL-0pQ21fUvd4AA/1000"
					},
					{
						src: "https://inews.gtimg.com/om_bt/OjPq2cnMN_-ivDKjxpCZ2kk_ab8YC5VMnL-0pQ21fUvd4AA/1000"
					},
					{
						src: "https://inews.gtimg.com/om_bt/OjPq2cnMN_-ivDKjxpCZ2kk_ab8YC5VMnL-0pQ21fUvd4AA/1000"
					},
					{
						src: "https://inews.gtimg.com/om_bt/OjPq2cnMN_-ivDKjxpCZ2kk_ab8YC5VMnL-0pQ21fUvd4AA/1000"
					},
					{
						src: "https://inews.gtimg.com/om_bt/OjPq2cnMN_-ivDKjxpCZ2kk_ab8YC5VMnL-0pQ21fUvd4AA/1000"
					},
					{
						src: "https://inews.gtimg.com/om_bt/OjPq2cnMN_-ivDKjxpCZ2kk_ab8YC5VMnL-0pQ21fUvd4AA/1000"
					},
					{
						src: "https://inews.gtimg.com/om_bt/OjPq2cnMN_-ivDKjxpCZ2kk_ab8YC5VMnL-0pQ21fUvd4AA/1000"
					},
					{
						src: "https://inews.gtimg.com/om_bt/OjPq2cnMN_-ivDKjxpCZ2kk_ab8YC5VMnL-0pQ21fUvd4AA/1000"
					},
					{
						src: "https://inews.gtimg.com/om_bt/OjPq2cnMN_-ivDKjxpCZ2kk_ab8YC5VMnL-0pQ21fUvd4AA/1000"
					},



					// 添加更多图片对象
				],
				// 初始化左右盒子
				leftList: [],
				rightList: [],
				// 初始化左右盒子高度
				leftH: 0,
				rightH: 0
			};
		},
		onLoad() {
			this.doList();
		},
		methods: {
			doList() {
				const that = this;
				this.list.forEach(res => {
					uni.getImageInfo({
						src: res.src,
						success: image => {
							let showH = (50 * image.height) / image.width;
							if (that.leftH <= that.rightH) {
								that.leftList.push({
									...res,
									height: showH
								});
								that.leftH += showH;
							} else {
								that.rightList.push({
									...res,
									height: showH
								});
								that.rightH += showH;
							}
						}
					});
				});
			}
		}
	};
</script>

<style>
	.container {
		padding: 0 24rpx;
		font-size: 14rpx;
		line-height: 24rpx;
		display: flex;
		justify-content: space-between;

		.right,
		.left {
			display: inline-block;
			width: 340rpx;
			vertical-align: top;
		}

		.left image,
		.right image {
			border-radius: 16rpx;
			width: 100%;
			margin-bottom: 24rpx;
		}
	}
</style>

效果