得到最好的方形排列

Question

情况

我有一定数量的正方形。我希望这些正方形始终来自像网格一样的正方形，但它不能有任何空白。我会使用 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 中的解决方案来拆分元素数组。现在我们只需要确定正确的块大小。

看起来标准是：

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

// 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);

希望有一种更好的方法来确定块大小，而不仅仅是迭代和增加大小，但这就是我在短时间内提出的。