起始相同的蛇形排序瀑布流菜单(一维数组转二维数组) 笔记

这是为了解决类似瀑布流菜单排列而产生的算法

关尔先生2021-07-12 11:09:30
1、方法(TEMP:原始数组,COLS_NUM:列数)

      const sortFn = (TEMPCOLS_NUM = 4=> {
        const l = TEMP.length;
        const MOD = l % COLS_NUM;
        const NEW_TEMP = new Array(COLS_NUM).fill(0).map(() => []);
        let count = 0;
        for (let i = 0i < li++) {
          const ITEM = TEMP[i];
          let mod = i % COLS_NUM;
          const rest = l - i// 包含当前这一个
          if (mod == 0) {
            // 计算当前是第几行,从1开始
            count++;
          }
          // 偶数行时,逆序分配
          if (count % 2 == 0) {
            // 当剩下数量不大于MOD时,就是最后一行了,逆序起始位改变,以保证最后一行的第一列不为空。
            if (rest <= MOD) {
              mod = rest - 1;
            } else {
              // 正常 逆序
              mod = COLS_NUM - 1 - mod;
            }
          }
          NEW_TEMP[mod].push(ITEM);
        }

2、测试方案,生成1~100的数组new Array(100).fill(0).map((e,i) => i+1),按13列排序

        sortFn(new Array(100).fill(0).map((e,i=> i+1),13)

3、返回结果



4、如果把数组的元素替换成菜单,把数字值看成子菜单的数量,那么返回的二维数组就可以渲染出按子菜单数量排序的瀑布流菜单


菜单瀑布流蛇形排序一维数组转二维数组Array.fill

上一篇:VUE项目局域网中用ip访问

下一篇:解决Git在添加ignore文件之前就提交了项目无法再过滤问题

本文链接: http://www.nanshanqiao.com/zz_article/83.html

暂无评论