资讯新闻 当形势不利自己的时候 我们都想要公平
深度学习小程序瀑布流，column-count布局完美解决从左到右顺序
微信小程序瀑布流这几天一直在学习，学习他的缘由是来自灵沐5.1瀑布流的形式不完美，在列表流量主广告有很大阻碍
分享下最近的学习成果和最终采用方案
思考
方案一：左右个一个列表
我相信这是网上采用最多且最简单的方式之一，它的原理是得到数据之后使用v-if判断索引值奇数偶数，进行分开渲染
优点：简单，易上手
缺点：广告阻碍，造成两边数量不同，同屏出现2个广告单元
方案二：Flex布局+Order顺序
使用Flex布局后设置主轴方向为竖向，随后在使用伪类标签添加Order属性，实现哪些数据靠前排序
优点：简单，易上手
缺点：数据抖动，排序有些问题，父级容器需要有高度，同屏出现2个广告单元
<template>
<view>
<view class="flex">
<block v-for="(item, index) in images" :key="index">
<view class="flex-item">
<image class="all-img" :src="item" mode="widthFix"></image>
<view class="key">{{index}}</view>
</view>
</block>
</view>
</view>
</template>
<script>
export default {
data() {
return {
images: [
'https://pic.3gbizhi.com/uploadmark/20250108/5a99246ee3ba5d7dd3febc602e596ae3.webp',
'https://pic.3gbizhi.com/uploadmark/20250123/7cf074caa5eb43411d538aea5be4b6fd.webp',
'https://pic.3gbizhi.com/uploadmark/20250115/9dc27ca1c9ad9a0c9aac8031cc38845b.webp',
'https://pic.3gbizhi.com/uploadmark/20250121/68f274cebfe6fe824662c849522f99f3.webp',
'https://pic.3gbizhi.com/uploadmark/20250115/c6aabc4e101db9d6e4fcc508df646314.webp',
'https://pic.3gbizhi.com/uploadmark/20250123/dfd7d57a65491600345968920ff61409.webp',
'https://pic.3gbizhi.com/uploadmark/20250108/5a99246ee3ba5d7dd3febc602e596ae3.webp',
'https://pic.3gbizhi.com/uploadmark/20250123/7cf074caa5eb43411d538aea5be4b6fd.webp',
'https://pic.3gbizhi.com/uploadmark/20250115/9dc27ca1c9ad9a0c9aac8031cc38845b.webp'
]
}
},
methods: {
}
}
</script>
<style>
.flex {
display: flex;
flex-wrap: wrap;
/* 知识点 */
height: 2000rpx;
flex-direction: column;
}
.flex-item {
width: 48%;
padding: 10rpx;
position: relative;
}
.key{
position: absolute;
top: 0;
left: 0;
background-color: red;
color: #ffffff;
padding: 20rpx;
}
.all-img {
height: 100%;
width: 100%;
}
/* 知识点 */
.flex-item:nth-of-type(2n+1){
order: 1;
}
.flex-item:nth-of-type(2n+2){
order: 2;
}
</style>方案三：Column-count布局+JS处理左右顺序
Column-count分栏，它使用场景是类似报纸上的内容分栏；因为它的数据也是从上到下，要使得column-count布局完美解决从左到右顺序；只需要遍历数组，根据索引奇偶性将元素分别添加到不同的临时数组中再导出
优点：简单，易上手
缺点：数据抖动，同屏出现2个广告单元
<template>
<view>
<view class="gallery">
<view class="item" v-for="(item, index) in sortedImages">
<image :src="item" mode="widthFix" />
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
images: [
'https://pic.3gbizhi.com/uploadmark/20250108/5a99246ee3ba5d7dd3febc602e596ae3.webp',
'https://pic.3gbizhi.com/uploadmark/20250123/7cf074caa5eb43411d538aea5be4b6fd.webp',
'https://pic.3gbizhi.com/uploadmark/20250115/9dc27ca1c9ad9a0c9aac8031cc38845b.webp',
'https://pic.3gbizhi.com/uploadmark/20250121/68f274cebfe6fe824662c849522f99f3.webp',
'https://pic.3gbizhi.com/uploadmark/20250115/c6aabc4e101db9d6e4fcc508df646314.webp',
'https://pic.3gbizhi.com/uploadmark/20250123/dfd7d57a65491600345968920ff61409.webp'
],
sortedImages: []
}
},
onLoad() {
this.sortImagesByIndexParity();
},
methods: {
sortImagesByIndexParity() {
const evenIndexItems = [];
const oddIndexItems = [];
// 遍历数组，根据索引奇偶性将元素分别添加到不同的数组中
for (let i = 0; i < this.images.length; i++) {
if (i % 2 === 0) {
evenIndexItems.push(this.images[i]);
} else {
oddIndexItems.push(this.images[i]);
}
}
// 合并偶数索引和奇数索引的数组
this.sortedImages = evenIndexItems.concat(oddIndexItems);
}
},
}
</script>
<style>
.gallery {
padding: 20rpx;
column-count: 2;
column-gap: 20rpx;
}
.item {
break-inside: avoid;
}
.item image {
border-radius: 10rpx;
width: 100%;
}
</style>分析
从已上学习过程我们知道，数据没有变化的情况下 方案1，方案2都可以满足我们的需求
在动态数据的情况下方案1，没有数据都抖动；但就讨厌多复制一次同样的代码；也无法搞定微信小程序流量主问题方案2和方案3在动态数据中加载下一页内容数据会再次排序，不仅顺序乱了，还会抖动一下
最终成果
我就是个这不行，那不要，简单的看不上，看上的不简单的崽种！！！
最后瀑布流在方案三：Column-count布局+JS处理左右顺序基础上，对他左分页展示解决了数据抖动，广告列表问题，还满足了瞎操作的我
<template>
<view>
<block v-for="(item, index) in sortedList" :key="index">
<view class="gallery">
<block v-for="(its, ids) in item" :key="ids">
<view class="item">
<image src="/static/logo.png" mode="widthFix" />
<text>{{its.title.rendered}}</text>
</view>
<view class="ads" v-if="(ids + 1) % 5 == 0">
AD
</view>
</block>
</view>
<view class="hr">
--------第 {{index + 1 }} 页--------
</view>
</block>
</view>
</template>
<script>
export default {
data() {
return {
page: 1,
sortedList: [],
strData: [],
}
},
onLoad() {
this.getlist();
},
// 监听触底----上啦刷新
onReachBottom() {
this.page = this.page + 1;
this.getlist();
},
methods: {
getlist() {
uni.request({
url: 'https://www.frbkw.com/wp-json/wp/v2/posts?page=' + this.page + '&per_page=7',
success: (res) => {
// console.log(res.data)
const evenIndexItems = [];
const oddIndexItems = [];
// 遍历数组，根据索引奇偶性将元素分别添加到不同的数组中
for (let i = 0; i < res.data.length; i++) {
if (i % 2 === 0) {
evenIndexItems.push(res.data[i]);
} else {
oddIndexItems.push(res.data[i]);
}
}
// 合并偶数索引和奇数索引的数组
var list = evenIndexItems.concat(oddIndexItems);
this.sortedList.push(list)
console.log(this.sortedList)
}
})
},
},
}
</script>
<style>
.hr {
color: red;
text-align: center;
margin: 20rpx 0;
}
.ads {
height: 600rpx;
width: 100%;
background-color: red;
border-radius: 20rpx;
margin: 20rpx 0;
}
.gallery {
padding: 20rpx;
column-count: 2;
column-gap: 20rpx;
}
.item {
break-inside: avoid;
margin-bottom: 20rpx;
}
.item image {
border-radius: 10rpx;
width: 100%;
}
</style>