出现场景
进行grid布局时,需要保证行列均处于对齐状态,且当行中设置多种对齐方式时,列依旧保持对齐。
处理方式
拿到的数据多为一维数组,处理如下
1、扩展一维数组为列的倍数
2、一维数组分割,取与列数相同的子项,合并成一个数组,作为新数组的值
函数如下
let sourceList = [1,2,3,4,5,6,7] // 源数组
let times = 5 // 列数
let remain = times - sourceList.length % times // 需要给源数组补充的元素个数
sourceList.length = sourceList.length + remain
sourceList.fill('补充值', sourceList.length - remain, sourceList.length)
const handleArr = (arr, num) => {
let result = new Array(Math.ceil(arr.length / num))
result.fill(null, 0, result.length)
for (let i = 0; i < arr.length; i++) {
Array.isArray(result[Math.floor(i / num)]) ?
result[Math.floor(i / num)].push(arr[i]) :
result[Math.floor(i / num)] = [arr[i]]
}
return result
}
let showList = handleArr(sourceList, times)
console.log(showList)