借助js切割数组实现标签的上下2,3排列的特殊布局

先看看实现的效果：

代码：

//根据后端返回数据长度分割数组
function chunk(array, size) {
  //获取数组的长度，如果你传入的不是数组，那么获取到的就是undefined
  const length = array.length
  //判断不是数组，或者size没有设置，size小于1，就返回空数组
  if (!length || !size || size < 1) {
    return []
  }
  //核心部分
  let index = 0 //用来表示切割元素的范围start
  let resIndex = 0 //用来递增表示输出数组的下标

  //根据length和size算出输出数组的长度，并且创建它。
  let result = new Array(Math.ceil(length / size))
  //进行循环
  while (index < length) {
    //循环过程中设置result[0]和result[1]的值。该值根据array.slice切割得到。
    result[resIndex++] = array.slice(index, (index += size))
  }
  //输出新数组
  return result
}
//标签特殊布局
function labelChunk(arr, size) {
  let temp_arr = chunk(arr, size),
    finnal_arr = []
  for (let i = 0; i < temp_arr.length; i++) {
    let temp = temp_arr;
    finnal_arr.push({
      top: temp[i].slice(0, 2),
      bottom: temp[i].slice(2)
    })
  }
  return finnal_arr
}
arr = [1,2,3,4,5,6,7,8,9,11];
labelChunk(arr,5);

 看看真是后端数据返回切割后的数组样子：

最终效果就是上图的那样 2,3排列；

部分内容百度也有，付下链接。侵权联系删除。https://www.cnblogs.com/xzma/p/8309100.html。