html瀑布流

 flex

<template>
	<view class="waterfall_left">
		<view class="waterfall_list" v-for="(item,index) in goodsLeftList" :key="index" >
		<view class=" waterfall_list_img">
			<image :src="item.goods_main_pic" mode="widthFix" @load="considerPush"></image>
		</view>
		<view class="msg-box">
			<view class="name single-omit">{{item.goods_name}}</view>
			<view class="price-box flex-align-center">
				<view class="unit"><text>￥</text>{{item.goods_sku.sku_sale_price}}</view>
			</view>
		</view>
	</view>
	</view>
	<view class="waterfall_right">
		<view class="waterfall_list" v-for="(item,index) in goodsRightList" :key="index">
			<view class="waterfall_list_img">
				<image :src="item.goods_main_pic" mode="widthFix" @load="considerPush"></image>
			</view>
			<view class="msg-box">
				<view class="name single-omit">{{item.goods_name}}</view>
				<view class="price-box flex-align-center">
					<view class="unit"><text>￥</text>{{item.goods_sku.sku_sale_price}}</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		props: {
			list: { type: Array, required: true },
		},
		data() {
			return {
				// 左侧商品列表
				goodsLeftList: [],
				// 右侧商品列表
				goodsRightList: [],
				// 组件数据备份
				newList: [],
			}
		},
		created() {
			this.touchOff(); // 触发排列
		},
		mounted() {},
		watch: {
			list(newValue, oldValue) {
				this.touchOff()
			},
		},
		computed: {},
		methods: {
			// 触发重新排列
			touchOff() {
				this.newList = [...this.list];
				this.goodsLeftList = [];
				this.goodsRightList = [];
				if (this.newList.length != 0) {
					this.goodsLeftList.push(this.newList.shift()); //触发排列
				}

			},
			// 计算排列
			considerPush() {
				if (this.newList.length == 0) return; //没有数据了
				let leftH = 0,
					rightH = 0; //左右高度
				var query = uni.createSelectorQuery().in(this);
				query.selectAll('.waterfall_left').boundingClientRect()
				query.selectAll('.waterfall_right').boundingClientRect()
				query.exec(res => {
					leftH = res[0].length != 0 ? res[0][0].height : 0; //防止查询不到做个处理
					rightH = res[1].length != 0 ? res[1][0].height : 0;
					if (leftH == rightH || leftH < rightH) {
						// 相等 || 左边小  
						this.goodsLeftList.push(this.newList.shift());
					} else {
						// 右边小
						this.goodsRightList.push(this.newList.shift());
					}
				});
			},
		}
	}
</script>

grid

<template>
  <div class="box">
    <div class="item">
      <img  src="/src/assets/image/cktx_01.jpg" alt="1" />
    </div>
    <div class="item">
      <img  src="/src/assets/image/cktx_02.jpg" alt="2" />
    </div>
    <div class="item">
      <img  src="/src/assets/image/cktx_03.jpg" alt="3" />
    </div>
    <div class="item">
      <img  src="/src/assets/image/cktx_04.jpg" alt="1" />
    </div>
    <div class="item">
      <img  src="/src/assets/image/cktx_05.jpg" alt="2" />
    </div>
    <div class="item">
      <img  src="/src/assets/image/cktx_06.jpg" alt="3" />
    </div>
    <div class="item">
      <img  src="/src/assets/image/cktx_07.jpg" alt="1" />
    </div>
    <div class="item">
      <img  src="/src/assets/image/cktx_08.jpg" alt="2" />
    </div>
    <div class="item">
      <img  src="/src/assets/image/cktx_09.jpg" alt="3" />
    </div>
  </div>
</template>
<style scoped lang="scss">  
.box {
  margin: 10px;
  column-count: 3;
  column-gap: 10px;
}
.item {
  margin-bottom: 10px;
}
.item img{
  width: 100%;
  height:100%;
}

</style>