最近自己在开发一款小程序，目的是为了学习，包括后端 也是我自己在写 后端用的是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%;
}
如此这般 你就得到了一个瀑布流布局
看一下效果还是：
看到这里了 希望能够帮到你
如此这般 你就得到了一个瀑布流布局
看一下效果还是：
[外链图片转存中...(img-Csg1FdPT-1725338302496)]
看到这里了 希望能够帮到你
我这个呢 目前是在开发阶段 没有测试数据很多 以及 下拉加载的情况
如果有朋友用了我的方法 有任何问题 我们可以一起讨论 感谢感谢