Получите лучшее квадратное расположение

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

И визуальным

То, что я пробовал

Я смотрел на это , но похоже, что он работает с прямоугольниками вместо квадратов.Мне также очень трудно следовать без визуального представления о том, что они хотят.

Я также смотрел на этот , который немного похож, но, кажется, немного не имеет отношения к моей ситуации.

Заключение

Как бы я создал gridLayout таким образом, как я хочу?Любая помощь приветствуется.

Answer 1

Вы можете использовать решение из Разделить массив на куски , чтобы разбить массив элементов.Теперь нам просто нужно определить правильный размер чанка.

Похоже, что критерии:

• Каждый чанк должен быть одинакового размера.Этого можно достичь, потребовав, чтобы количество элементов было равномерно делено на размер фрагмента (т. Е. #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);

Можно надеяться, что есть лучший способ определить размер куска, чем просто итерация и увеличение размера, но это то, с чем я пришел за это короткое время.