uniapp、taro 微信小程序 瀑布流

项目场景

例如：项目场景：示例:商品货架、文章、视频等组件

---

效果图

实现过程

提示：大致思路：

1. 布局分开左右两边布局，分成二条线直线，互不相关。
2. 利用uni.createSelectorQuery() 实例获取节点
3. 每次获取左右两边的数据的高度进行判断之后再push 数据进去渲染

---

代码如下

<template>
	<view class="dislocat_content">
		<view id="dis_left" class="dislocat_content_left">
			<view class="border-outside" v-for="(item, index) in leftList" :key="index">
				<image class="img_icon" :src="item" mode="widthFix"></image>
			</view>
		</view>
		
		<view id="dis_right" class="dislocat_content_right">
			<view class="border-outside" v-for="(item, index) in rightList" :key="index">
				<image class="img_icon" :src="item" mode="widthFix"></image>
			</view>
		</view>
	</view>
</template>

<script>
	let query, leftHeight = 0, rightHeight = 0;
	
	export default {
		data() {
			return {
				totalList: [
					"../../static/dis_icon.jpg",
					"../../static/dis_icon2.jpeg",
					"../../static/dis_icon3.jpeg",
					"../../static/dis_icon4.jpg",
					"../../static/dis_icon5.jpg",
					"../../static/dis_icon6.jpg",
					"../../static/dis_icon.jpg",
					"../../static/dis_icon7.jpg",
					"../../static/dis_icon8.jpg",
					"../../static/dis_icon5.jpg",
					"../../static/dis_icon2.jpeg",
					"../../static/dis_icon3.jpeg",
					"../../static/dis_icon4.jpg",
					"../../static/dis_icon5.jpg",
					"../../static/dis_icon6.jpg",
					"../../static/dis_icon.jpg",
					"../../static/dis_icon2.jpeg",
					"../../static/dis_icon3.jpeg",
					"../../static/dis_icon4.jpg",
					"../../static/dis_icon5.jpg",
					"../../static/dis_icon2.jpeg",
					"../../static/dis_icon.jpg",
					"../../static/dis_icon7.jpg",
					"../../static/dis_icon8.jpg",
					"../../static/dis_icon5.jpg",
					"../../static/dis_icon2.jpeg",
					"../../static/dis_icon3.jpeg",
					"../../static/dis_icon4.jpg",
					"../../static/dis_icon5.jpg",
					"../../static/dis_icon6.jpg"
				],		// 总数居
				leftList: [],		// 左边数据
				rightList: [],		// 右边数据
			}
		},
		mounted() {
			this.getDataDom()
		},
		methods: {
			async getDataDom() {
				let data = this.$data;
				query = uni.createSelectorQuery().in(this);
				for (let item in data.totalList) {
					// 判断两边的高度
					leftHeight <= rightHeight ? data.leftList.push(data.totalList[item]) : data.rightList.push(data.totalList[item]);
					await this.getBoxHeight(data.leftList, data.rightList);
				}
			},
			
			getBoxHeight(leftList, rightList) {
				return new Promise((resolve, reject) => {
					this.$data.leftList = leftList
					this.$data.rightList = rightList
					query.select('#dis_left').boundingClientRect();
					query.select('#dis_right').boundingClientRect();
					// 处理异步问题，没有数据
					setTimeout(() => {
						query.exec((res) => {
							leftHeight = res[0].height; //获取左边列表的高度
							rightHeight = res[1].height; //获取右边列表的高度
							resolve();
						});
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.dislocat_content{
		width: 100%;
		position: relative;
		overflow: hidden;
		box-sizing: border-box;
		&_left, &_right{
			width: 48.2%;
			float: left;
			border-radius: 10rpx;
		}
		&_left{
			margin-left: 1.2%;
			margin-right: 0.6%;
		}
		&_right{
			margin-right: 1.2%;
			margin-left: 0.6%;
		}
		.border-outside{
			margin-top: 8rpx;
			.img_icon{
				width: 100%;
				display: block;
				border-radius: 10rpx;
			}
		}
	}
</style>

---

到这里，错位布局就完了，有不对之处，请指出改正，谢谢！！！