首页 前端知识 column多行布局瀑布流 横向布局的处理数组的方法

column多行布局瀑布流 横向布局的处理数组的方法

2024-05-10 22:05:02 前端知识 前端哥 58 773 我要收藏

前言

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

实现的思想,就是将原本的数组,按照我们分列数的形式,进行分切再拼接成数组,呈现出来就是从左到右的横向排列;
当下能想到的一个小窍门,有更好的方案,期待得到反馈;;

转载请注明出处或者链接地址:https://www.qianduange.cn//article/8026.html
标签
评论
发布的文章

HTML5(H5)中的Web Workers

2024-05-19 09:05:52

HTML5

2024-02-27 11:02:15

HTML5 <option> 标签

2024-05-19 09:05:51

@JsonProperty 注解详解

2024-05-19 09:05:27

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!