1、方法(TEMP:原始数组,COLS_NUM:列数)
const sortFn = (TEMP, COLS_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 = 0; i < l; i++) {
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、如果把数组的元素替换成菜单,把数字值看成子菜单的数量,那么返回的二维数组就可以渲染出按子菜单数量排序的瀑布流菜单