Как реализовать мозаику изображений JS (не скрипт, только логика расчетов)?

Question

[Шаров Дмитрий]

Есть задача реализовать мозаику изображений, аналогично как на Яндекс картинки
высота изображения всегда одинакова 200px, ширина варьируется.
соответственно нужна логика как построить изображения в строке так что бы ширина у всех строк была одинаковая выглядеть должно примерно так

Нужен не сам скрипт, а только логикак как это все рассчитать, абсолютно точно все рассчитать нельзя, то думаю возможно в строке картиноки обрезать/растянуть на пару пикселей

Answer 1

[Александр Таратин]

masonry.desandro.com

Comments

[Шаров Дмитрий]

Нпписал же, нужен не сам скрипт а логика, так у самого с матемтикой плоховастенько

Answer 2

[Mi7teR]

ru.wikipedia.org/wiki/%D0%97%D0%B0%D0%B4%D0%B0%D1%...

Answer 3

[Kir]

1. строка: div width = 100%, overflow: hidden, height: Npx
2. в цикле для массива картинок (должна быть известна ширина и высота) картинки:
2.а. набираем картинки в стэк, считаем суммарную ширину стека, крутим цикл пока суммарная ширина < 100%
2.б. как только ширина стэка >= 100% - помещаем все эти картинки в строку на п.1
3. новая строка, идти на п.1

Comments

[Шаров Дмитрий]

Примерно так и делаю, но тут возникает такая ситуация дано,
- ширина строки 1000
- в строке набралось 800
- следующая итерация цикла и попалось изображение 201
Логически все удовлетворяет условиям вами описанными, но вот визуально не есть хорошо

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

[Kir]

Нужен компромисс - задача о рюкзаке полиномиальная. Один-пять-десять срезанных пикселей не страшно.
Кстати я сам когда решал подобную задачу разбивал поле, где сидят элементы на дискретныя ячейки, кратные размеру блоков, потом в цикле подбирал рядом стоящие элементы таким образом, чтобы заполнить пространство без швов.