column多行布局瀑布流+横向布局的处理数组的方法-Toy模板网

这篇具有很好参考价值的文章主要介绍了column多行布局瀑布流+横向布局的处理数组的方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前言

有个需求是商品的列表(类似于淘宝商品的左右列表展示往下)，要实现瀑布流的形式去呈现，但是数据的列表的数组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;
},