Заполнить экран клетками без циклов, сохраняя форму прямоугольника?

Question

[Архип Жаров]

Была задача заполнить экран клетками, и при этом получившийся прямоугольник должен был полностью вмещаться в него, сохраняя свою форму, как здесь:


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


Написал для этого дела код, но иногда клетки всё равно переносятся (думаю потому что при ресайзе ширина экрана может не делиться на 10, а ища подходящий размер клетки мы его уменьшаем на 0.01). Возможно ли сделать с помощью математики так, чтобы соблюдались вышеперечисленные условия, и при этом в коде не использовались циклы для подбора подходящего размера клетки, а также можно ли найти его при любом разрешении экрана? Правильно ли я вообще подошёл к решению проблемы?

Comments

[Сергей Соколов]

Уточните условия задачи.
Именно 1000 ячеек? Можно ли менять пропорции самих ячеек, и насколько?

[profesor08]

v-for условие "без циклов" не соблюдено

[Архип Жаров]

Сергей Соколов, да, 1000, минимальный размер ячеек 5px, пропорции же меняются благодаря перебору размеров ячейки с помощью -= 0.01 в коде для поиска подходящих, эти куски есть в демо

[Архип Жаров]

profesor08, имеется в виду перебор размеров ячейки с помощью -= 0.01

Answer 1

[Сергей Соколов]

Разложить число ячеек на множители 1000 = 2 * 2 * 2 * 5 * 5 * 5

1000 ячеек можно представить как ограниченное число прямоугольников:

2 * 500
4 * 250
5 * 200
8 * 125
10 * 100
20 * 50
25 * 40

и зеркальные.

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

Примерно так:

Вам остаётся доработать, чтобы работало и при пропорциях экрана когда высота больше ширины.

Comments

[Архип Жаров]

Разбиение на прямоугольники помогло, спасибо большое. У меня получилось это сделать немного с другим подходом - вычисляются соотношения сторон исходя из 2 * 500, 4 * 250, т.д., находится самое близкое из них к экранному, но уже него, берётся соответствующее значение количества столбцов и задаётся ширина клетки. Если вам или ещё кому-нибудь интересно, я создал для этого дела демо