一维数组变有规律二维数组

12 篇文章 0 订阅
6 篇文章 0 订阅

布局写多了,总会踩上几个坑,面对有奇偶需求的布局而服务端数据只返回一维数组列表时,flex布局帮不上忙的时候,有没有一种抓耳挠腮的感觉呢!

这种状态下,前端就得发挥一下啦!

来看一下何谓奇偶布局吧!图片有点难看,将就着看,能理解就行啦,毕竟是截图工具画的~~~

如图所示,类似这种结构,如果使用flex来布局,那需要好好想想,对吧!

那就换一种思路,布局不直接,那就改数据结构呗!

 如图所示,每一行都是一个数组,循环行就ok啦,这其中的规律即为奇行为3,偶为2,所以呢,把服务端返回的一维数组转成二维不就搞定了吗?

那如何传呢?按大千世界,无奇不有的定律,方法肯定是有很多的啦,在此提供一个相对简单的方法,代码如下:

注意的点:此方法是通过会修改原始数组出发来达到效果的,请在使用的时候千万注意,另外,这个针对简单数据类型问题不大,如果是引入类型的话呢,就要考虑浅拷贝的后遗症哦

// m奇数行数组显示个数  n偶数行数组显示个数 arr 数组
function demo (arr, m, n) {
    var temp = []
    for(var i = 0; i < arr.length -1; i++) {
        var na = arr.splice(0, (m + n))
        var bm = a.slice(0,m)
        var bn = a.slice(m,na.length)
        temp.push(bm) temp.push(bn)
    }
    console.log(temp)
}

再次提醒,一定要注意以上提到的 隐形 bug 哦

  • 0
    点赞
  • 0
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:书香水墨 设计师:CSDN官方博客 返回首页
评论

打赏作者

素素_钗钗

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值