javascript - 得到最好的正方形排列

Question

现状

我有一定数量的方 block 。我希望这些正方形始终来自像网格一样的正方形，但它不能有任何空白。我会使用 JavaScript 来做到这一点。网格将像这样存储

var gridLayout = [[1, 2], [3, 4]];

这将导致这个网格

问题

如果我有 16 个正方形，结果会是

var gridLayout = [[1, 2, 3, 4],[5, 6, 7, 8],[9, 10, 11, 12],[13, 14, 15, 16]];

和视觉

现在这一切都很容易做到，但是如果有 3 个正方形呢？我希望它做这样的事情，有利于垂直布局。

var gridLayout = [[1, 2, 3]];

与视觉

如果我有 8 个正方形，它无法构成完美的正方形，所以我想成为

var gridLayout = [[1, 2, 3, 4], [5, 6, 7, 8]];

和视觉

我尝试过的

我看过this但它似乎正在使用矩形而不是正方形。如果没有他们想要的视觉效果，我也很难跟上。

我也看过this这有点相似，但似乎与我的情况有点无关。

结论

我将如何以我想要的方式创建 gridLayout？感谢您的帮助。

Answer 1

您可以使用 Split array into chunks 中的解决方案, 拆分元素数组。现在我们只需要确定正确的 block 大小。

看起来标准是:

• 每个 block 的大小必须相同。这可以通过要求元素数量能被 block 大小整除(即 #elements % chunk_size === 0)来实现。
• 行数最多应与列数一样多。换句话说， block 大小必须大于 block 数。我们可以通过从至少为 Math.sqrt(#elements) 的 block 大小开始来实现这一点。

// Implementation

function chunk (arr, len) {
  var chunks = [],
      i = 0,
      n = arr.length;

  while (i < n) {
    chunks.push(arr.slice(i, i += len));
  }

  return chunks;
}

function gridify(arr) {
  let size = Math.ceil(Math.sqrt(arr.length));
  while (arr.length % size !== 0) {
    size += 1;
  }
  return chunk(arr, size);
}

// Helper functions for example

function range(n) {
   return Array.from({length: n}, (_,i) => i+1);
}

function run(size) {
  console.log(JSON.stringify(gridify(range(size))));
}

// Create examples

run(4);
run(16);
run(3);
run(8);

希望有一种比仅仅迭代和增加大小更好的方法来确定 block 大小，但这就是我在这么短的时间内想到的。