VueJS：如何返回 3 个新数组，每个数组中的项目数量相等，除了最后一个数组？

Posted 2023-02-16

【中文标题】VueJS：如何返回 3 个新数组，每个数组中的项目数量相等，除了最后一个数组？

【英文标题】：VueJS: How to return 3 new arrays with equal amount of items in each, except for the last array?

【发布时间】：2021-10-25 18:45:08

【问题描述】：

我正在使用 Bootstrap5 和 VueJS 2 并尝试创建一个“pinterest 风格”的卡片布局，如下图所示：

上面的布局示例需要以下 html 标记： [Codesandbox available]

<main>
    <div class="container-fluid">
        <div class="row">
           <div class="col-md-9">
                <div class="row">
                      <div class="col-md-4">
                        <article>
                        </article>
                        <article>
                        </article>
                      </div>
                      <div class="col-md-4">
                        <article>
                        </article>
                        <article>
                        </article>
                      </div>
                      <div class="col-md-4">
                        <article>
                        </article>
                        <article>
                        </article>
                      </div>
           </div>
        <aside class="col-md-3 ml-auto">
           ...sidebar content...
        </aside>
        </div>
    </div>
</main>

使用 JavaScript，如何获取数据数组并返回 3 个新数组，每个数组中除最后一个数组外的项目数量相等？这样我就可以正确地使用上面屏幕截图中所示的输出来构建布局？因此，例如，如果我有一个[1,2,3,4,5,6,7,8,9,10,11] 的源数据数组，我想返回类似[ [1,2,3,4], [5,6,7,8], [9,10,11] ]

我对此进行了初步尝试（在 VueJS 中），但我显然没有正确地做到这一点，因为虽然我的布局有点工作，但顺序是错误的，并且在一些卡片下方有间隙。恐怕我的 javascript 知识很一般。 我的尝试：https://codesandbox.io/s/vue-bootstrap-card-layout-0xjlt?file=/src/App.vue

【问题讨论】：

这可能有用：***.com/questions/8495687/split-array-into-chunks

试过类似的方法，但是如何指定我只想返回 3 个子数组？

看看这个_.chunk() in lodash，它正是你想要的lodash.com/docs/4.17.15#chunk

您可以确定chunk 的大小除以array.length 并计算结果上限：chunk = Math.ceil( array.length / 3);

@AdilBimzagh：谢谢，你是对的。有什么理由使用 Lodash 库而不是下面发布的答案？

【参考方案1】：

您非常接近，但是要获得正确的块数，请除以所需的列数并获得项目数的上限...

Math.ceil(this.mockData.length / 3)

  computed: 
    chunkArray() 
      let result = [];
      const size = Math.ceil(this.mockData.length / 3);
      for (let i = 0; i < this.mockData.length; i += size) 
        let chunk = this.mockData.slice(i, i + size);
        result.push(chunk);
      
      return result;
    ,
  ,

Codesandbox

【讨论】：

谢谢！这确实回答了我的问题，我会将其标记为“已解决”，但我没有考虑的一件事是订购。订单现在是垂直的。可以让它水平吗？

【参考方案2】：

如果您希望订单是“水平的”，例如：

[[1, 4, 7, 10], [2, 5, 8, 11], [3, 6, 9]]

然后需要稍微不同的方法。您只需遍历将每个项目推入适当的子阵列（很像将一副扑克牌发给三个人）。

computed: 
  chunkArray() 
    let result = [];
    const cols = 3;
    this.mockData.forEach((item, index) => 
      let i = index;
      // determine the index of the destination sub-array 
      while (i >= cols) 
        i -= cols; // i will be 0, 1, or 2
      
      // create the sub-array if needed
      if (!Array.isArray(result[i])) 
        result[i] = [];
      
      // put the item in the sub-array
      result[i].push(item);
    )

    return result;
  ,
,

https://codesandbox.io/s/vue-bootstrap-card-layout-forked-cj0w1?file=/src/App.vue:7492-7847

【讨论】：

正在研究这个...我会回复你的。谢谢！

这个网格层非常适合中等断点和更高的断点。但是，对于具有单列视图的小屏幕，排序是随机的。是否可以将数组项订购回 [1, 2, 3, 4, 5, 6....etc] 这基本上是上面@zim的答案？我可以为此提出一个新问题，只是想知道它是否首先可能。谢谢！