获得最佳正方形排列

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

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