前言
有个需求是商品的列表(类似于淘宝商品的左右列表展示往下),要实现瀑布流的形式去呈现,但是数据的列表的数组Array
,是动态的获取;
实现的方案:
- 方案一:通过float的形式来实现,但是会导致特殊的模块的边距不好判断与移动的情况;
- 方案二:通过
display:flex;
的实现,得先固定宽高的(具体的实现不综述);
具体的实现:点击翻看文章 - 方案三:column 实现瀑布流主要依赖两个属性。
接下来主要的讲述的方案三的方法;
在我的需求中,选用方案三的实现,其中俩个属性:
column-count
属性,是分为多少列。column-gap
属性,是设置列与列之间的距离。
// 对父元素进行设置
.item_box {
margin: 10px;
column-count: 3; // 默认列数2
column-gap: 10px; // 列间距
}
.item {
margin-bottom: 10px;
}
只需要简单的俩个属性即可实现,但是在这里存在一个问题;原本的横向读取数组的列表,变成纵向从左往右的形式读取,使得拿到的数组列表呈现不一致,针对这个问题;
我采取的方式是将获取到的数组Array
,通过计算属性compouted
(vue中的引用)的形式处理下;
// 处理数组的方法
const currenList = []; // 获取到的list
const cloGapList = this.getColumnsList(currenList, 2); // 返回处理后的数组,并渲染
// list 待处理的数组;columnsNum 列数
getColumnsList(list, columnsNum = 2) {
const arrObject = {};
for(let i = 0; i < columnsNum; i++) {
arrObject[i] = []; // 创建空的对象数组
}
list.forEach((element, index) => arrObject[index%columnsNum].push(element));
const cloGapList = [];
for(let key in arrObject) {
cloGapList.push(...arrObject[key])
}
return cloGapList;
},
实现的思想,就是将原本的数组,按照我们分列数的形式,进行分切再拼接成数组,呈现出来就是从左到右的横向排列;
当下能想到的一个小窍门,有更好的方案,期待得到反馈;;