⼩程序实现瀑布流格式的同时还需要按照排序排放
瀑布流的格式在很多的APP和⼩程序都能看到，就是宽度固定，⾼度⾃适应的布局，例如⼩红书这种展⽰型的，我看过了⼩红书的官⽹，他主要是分为左右两列。这样直接使⽤float布局或者flex布局就可以了，把拿到的列表进⾏遍历，单数在左边，双数在右边
getImgList: function(imgList) {
- let that = this
- let rightImgList = []
- let leftImgList = []
- if (imgList.length > 0) {
- for (let i = 0; i < imgList.length; i++) {
- if ((i + 1) % 2 === 0) {
- rightImgList.push(imgList[i])
- } else {
- leftImgList.push(imgList[i])
- }
- }
- that.setData({
- leftImgList: leftImgList,
- rightImgList: rightImgList
- })
-
- }
- },
⼀开始觉得没什么问题，但是有没有想过，图⽚⾼度⾃适应了，也就是你不知道图⽚的⾼度是多少，加⼊刚好获取列表单数的是长图⽚，双数的是宽图⽚，那么整体的布局就会如下所⽰
同样都是三个，但是明显左边的⽐右边的⾼太多了，所以直接使⽤这种⽅式是不合理的
接下来开始寻解决瀑布流的⽅式
1、⼀个是使⽤css的flex，以下属性注意使⽤：
1、column-count 把div中的⽂本分为多少列
2、column-width 规定列宽
3、column-gap 规定列间隙
4、break-inside: avoid; ←在制作⼿机站瀑布流时候，会出现图⽚错乱，请使⽤这个属性：避免元素内部断⾏并产⽣新列；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>瀑布式布局</title>
</head>
<style>
.waterfall{
column-count: 3;
column-gap: 0;
}
.item{
box-sizing: border-box;
break-inside: avoid;
padding: 10px;
}
.item-content{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 10px;
height: auto;
font-size: 20px;
color: #686868;
box-sizing: border-box;
border: 1px solid #ccc;
}
</style>
<body>
<div class="waterfall">
<div class="item">
<div class="item-content">
1.三⽉到⼤理赏樱花不远不近
</div>
</div>
<div class="item">
<div class="item-content">
2.三⽉到⼤理赏樱花不远不近，才是最好的距离余⽣，请带上⾃⼰的阳光回忆，在部队那些⽇⼦被遗忘的花⼉春光
</div>
</div>
<div class="item">
<div class="item-content">
3.三⽉到⼤理赏樱花不远不近，才是最好的距离余⽣，请带上⾃⼰的阳光回忆
</div>
</div>
<div class="item">
<div class="item-content">box sizing
4.三⽉到⼤理赏樱花不远不近
</div>
</div>
<div class="item">
<div class="item-content">
5.三⽉到⼤理赏樱花不远不近，才是最好的距离余⽣，请带上⾃⼰的阳光回忆，在部队那些⽇⼦被遗忘的花⼉春光
5.三⽉到⼤理赏樱花不远不近，才是最好的距离余⽣，请带上⾃⼰的阳光回忆，在部队那些⽇⼦被遗忘的花⼉春光 </div>
</div>
<div class="item">
<div class="item-content">
6.三⽉到⼤理赏樱花不远不近，才是最好的距离余⽣，请带上⾃⼰的阳光回忆
</div>
</div>
<div class="item">
<div class="item-content">
7.三⽉到⼤理赏樱花不远不近,⼜近⼜远
</div>
</div>
<div class="item">
<div class="item-content">
9.三⽉到⼤理赏樱花不远不近，才是最好的距离余⽣，请带上⾃⼰的阳光回忆，在部队那些⽇⼦被遗忘的花⼉春光 </div>
</div>
<div class="item">
<div class="item-content">
9.三⽉到⼤理赏樱花不远不近，才是最好的距离余⽣，请带上⾃⼰的阳光回忆
</div>
</div>
</div>
</body>
</html>
出现结果如下
对于⼿机来说明显我们希望的是顺序是从左到右排列⽽不是从上到下排列
因此开始使⽤js获取每⼀列的⾼度来控制怎么显⽰，代码如下
wxml
<view class="list-container">
<view id="left">
<view wx:for="{{leftList}}" wx:key bindtap="toDertail" data-value="{{item.id}}">
<image src="{{ver}}" mode='widthFix' class="cover"></image>
<view class="title">{{item.title}}</view>
<view class="like-content">
<image wx:if="{{is_like == 1}}" src="../../icon/heart_white.png" class="heart"></image> <image wx:else src="../../icon/heart_red.png" class="heart"></image>
<view class="link-num">{{item.like_num}}</view>
</view>
</view>
</view>
<view id="right">
<view wx:for="{{rightList}}" wx:key bindtap="toDertail" data-value="{{item.id}}">
<image src="{{ver}}" mode='widthFix' class="cover"></image>
<view class="title">{{item.title}}</view>
<view class="like-content">
<image wx:if="{{is_like == 1}}" src="../../icon/heart_white.png" class="heart"></image> <image wx:else src="../../icon/heart_red.png" class="heart"></image>
<view class="link-num">{{item.like_num}}</view>
</view>
</view>
</view>
</view>
js
onShow: function () {
that.initInfo()
},
initInfo() {
let that = this
<('/article/list', null, res => {
that.isLeft(res.data)
})
},
// 实现瀑布流
async isLeft(list) {
query = wx.createSelectorQuery();
let leftList = this.data.leftList
let rightList = this.data.rightList
for (const item of list) {
leftHeight <= rightHeight ? leftList.push(item) : rightList.push(item); //判断两边⾼度，来觉得添加到那边 BoxHeight(leftList, rightList);
}
},
// 根据⾼度来判断下⼀个图⽚进⼊左边还是右边
getBoxHeight(leftList, rightList) { //获取左右两边⾼度
return new Promise((resolve, reject) => {
this.setData({ leftList, rightList }, () => {
query.select('#left').boundingClientRect();
query.select('#right').boundingClientRect();
<((res) => {
leftHeight = res[0].height; //获取左边列表的⾼度
rightHeight = res[1].height; //获取右边列表的⾼度
resolve();
});
});
})
},
假如出现ReferenceError: regeneratorRuntime is not defined，解决如下
这⾥使⽤了⼀部加载，async await
在⼩程序中使⽤async await如下
1.
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论