The waterfall flow layout demo2 (method 2) used by the uniapp wechat applet (copy and paste can be used without other processing)

design sketch ：

<template>
	<view class="container">
		<view class="left">
			<view v-for="(item,index) in leftList" :key="index" class="imgBox">
				<image :src="item.img" alt="" mode="widthFix"></image>
				<view class="txt">{
    {
    item.name}}</view>
			</view>

		</view>
		<view class="right">
			<view v-for="(item,index) in rightList" :key="index" class="imgBox">
				<image :src="item.img" alt="" mode="widthFix"></image>
				<view class="txt">{
    {
    item.name}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
    
		data() {
    
			return {
    
				list: [{
    
						img: "../../static/home/weixin.png",
						name: '0 Name of commodity , Can be very long, very long, very long, very long, very long, very long, very long, very long, very long, very long, very long, very long ',
						id: 100
					}, {
    
						img: "../../static/home/bg_yjc.png",
						name: '1 Name of commodity , Can be very long, very long, very long, very long, very long, very long, very long, very long, very long, very long, very long, very long ',
						id: 100
					}, {
    
						img: "../../static/home/bg.png",
						name: '2 The product name will exceed N Do not fold on line ',
						id: 100
					},
					{
    
						img: "../../static/home/bg.png",
						name: '3 When there are only two lines of titles, the height is 39',
						id: 100
					}, {
    
						img: "../../static/home/bg.png",
						name: '4 You can customize the specific style ',
						id: 100
					}, {
    
						img: "../../static/home/bg_yjc.png",
						name: '5vue Of H5 The same is true for pages ',
						id: 100
					}, {
    
						img: "../../static/img/shenfen1.png",
						name: '6 When there is only one line of title ',
						id: 100
					}, {
    
						img: "../../static/home/bg_yjc.png",
						name: '7vue Of H5 The same is true for pages ',
						commdityPrice: 100
					}, {
    
						img: "../../static/home/bg.png",
						name: '8vue Of H5 The same is true for pages ',
						commdityPrice: 100
					}, {
    
						img: "../../static/home/bg_yjc.png",
						name: '9vue Of H5 The same is true for pages ',
						commdityPrice: 100
					}, {
    
						img: "../../static/home/weixin.png",
						name: '10 Name of commodity , Can be very long, very long, very long, very long, very long, very long, very long, very long, very long, very long, very long, very long ',
						id: 100
					},
				], // List of goods ,
				//  Initialize left and right boxes 
				leftList: [],
				rightList: [],
				//  Initialize the height of the left and right boxes 
				leftH: 0,
				rightH: 0
			}
		},
		//  Page loading 
		onLoad(e) {
    
			this.doList()
		},
		//  Page shows 
		onShow() {
    

		},
		//  Method 
		methods: {
    
			doList() {
    
				const that = this
				this.list.forEach(res => {
    
					//  Get the width and height of the picture 
					uni.getImageInfo({
    
						src: res.img,
						success: (image) => {
    
							console.log(res.img)
							//  Calculate the image rendering height 
							let showH = (50 * image.height) / image.width
							//  Judge the height of the left and right boxes 
							if (that.leftH <= that.rightH) {
    
								that.leftList.push(res)
								that.leftH += showH
							} else {
    
								that.rightList.push(res)
								that.rightH += showH
							}
						}
					})
				})
			}
		},
		//  Compute properties 
		computed: {
    

		},
		//  The listener 
		watch: {
    

		},
		//  Page hidden 
		onHide() {
    

		},
		//  Page uninstall 
		onUnload() {
    

		},
		//  Trigger pull-down refresh 
		onPullDownRefresh() {
    
			this.pageNum = 1
			// this.getListData()
		},
		//  Handling function of page pull bottom event 
		onReachBottom() {
    
			this.pageNum++
			// this.getListData()
		},
	}
</script>

<style lang="scss" scoped>
	.container {
    
		padding: 0 30rpx;
		font-size: 14rpx;
		line-height: 24rpx;
	}

	.right,
	.left {
    
		display: inline-block;
		width: 40%;
		vertical-align: top;
		.imgBox{
    
			margin-bottom: 25rpx;
			.txt{
    
				font-size: 24rpx;
			}
		}
	}

	.left {
    
		float: left;
	}
	.right{
    
		float: right;
	}

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

Reprint ： Thanks for sharing.
Link to the original text ：https://blog.csdn.net/He_n_ry/article/details/125242284