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

Question

我正在使用 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

Answer 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

Answer 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