uniapp 实现瀑布流布局（网上找不到合适的方法就进来看看我的吧）

前端小李子

已于 2024-09-03 12:47:41 修改

阅读量513

点赞数 3

分类专栏： uniapp 文章标签： uni-app

于 2024-09-03 12:42:04 首次发布

本文链接：https://blog.csdn.net/ly5926/article/details/141858397

版权

uniapp 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

最近自己在开发一款小程序，目的是为了学习，包括后端也是我自己在写后端用的是Ruoyi框架

小程序这边呢原生的我会 uniapp 久闻大名却从未试手于是选择了uniapp写微信小程序

话不多说内容展示的时候我选择了使用小红书咸鱼等都在使用的瀑布流布局，出于两个原因

1 个人觉得很好看

2 对于图片的展示很到位我做的是一个球场类的小程序球场图片横着拍竖着拍的都有那么这种情况下

只有保证宽度一致高度自适应的方式才能让图片既不变形又能在显示区域内完全显示不留空白

在web端做一个瀑布流布局是很简单的大家都知道 css + js 定位维护高度列表…

但是在uniapp这边尤其是还要顾着小程序/h5/app等可以使用的方法就不多了，我在写之前也是

各种百度各种ai 但是我得到的信息真的很少也有但是我觉得有点复杂（要维护图片高度的列表还要计算图片下面标题所占的行数万一我标题下面还有其他东西呢又得计算一大堆）不是我想要的于是决定自己写了

看图：

在这里插入图片描述

这两个大框框外还有一个盒子相对定位这两个大框框绝对定位到如图

然后维护两个数据list 每次先判断左右两个大盒子的高度那个高度小就往哪个里面的list push数据

这样的方式有如下几个好处：

1 不用维护高度的列表

2 不用提前加载图片去获取图片的宽高避免了加载慢以及频繁获取图片宽高带来的闪屏的影响

3 每个小框框里面的内容不限你可以放任何你想放的东西标题也可以取得很长因为我们是根据大框框的高度来放元素的

4 代码简单逻辑易懂

下面是一些核心的代码

<div class="container">
		<div class="left">
			<div v-for="item in leftList" :key="item.id" class="containerItem">
				<div style="width: 100%;position: relative;">
					<image :src="item.courtImage" style="width: 100%;" mode="widthFix"></image>
					<span class="priceShowSpan" :class="!item.price ? '' :'needMoney'">
						{{!item.price?'免费':item.price + '元/人'}}
					</span>
				</div>
				<div>
					{{item.courtName}}
				</div>
			</div>
		</div>
		<div class="right">
			<div v-for="item in rightList" :key="item.id" class="containerItem">
				<div style="width: 100%">
					<image :src="item.courtImage" style="width: 100%;" mode="widthFix"></image>
				</div>
				<div>
					{{item.courtName}}
				</div>
			</div>
		</div>
	</div>

mounted(){
		  this.getHeight(".left",".right")
	  },
	  methods:{
		 getHeight(selector1,selector2) {
		    const query = uni.createSelectorQuery().in(this);
			query.select(selector1).boundingClientRect(data => {
				// 第一个高度
				let leftheight = data.height
				
				const query2 = uni.createSelectorQuery().in(this);
				query2.select(selector2).boundingClientRect(data => {
					// 第二个高度
					let rightheight = data.height
					this.insertToList(leftheight,rightheight)
				}).exec();
			}).exec();
		 },
		 insertToList(left,right){
			 console.log(left,right)
			 if(left <= right){
				 this.leftList.push(this.listRender[this.insertIndex])
			 }else{
				 this.rightList.push(this.listRender[this.insertIndex])
			 }
			 this.insertIndex++
			 if(this.insertIndex != this.listRender.length){
				 this.getHeight(".left",".right")
			 }
		 }
	  }
	}

.container{
    width: 100%;
	position: relative;
}
.containerItem{
    display: flex;
    flex-direction: column;
    align-items: center;
	border-radius: 5px;
	border:1px solid #ffffff;
	overflow: hidden;
	margin: 10px 0;
	box-shadow: 1px 1px 20px 1px #2A3A30;
}
.left{
	position: absolute;
	left:0%;
	width: 49%;
}
.right{
	position: absolute;
	left:51%;
	width: 49%;
}