@wagwandude

Как выравнять много элементов по площади родителя?

Всем привет. Уже второй день пытаюсь решить проблему.
Надеюсь кто-нибудь все таки разъяснит, как лучше всего построить алгоритм выравнивания, либо предоставит ссылки на готовые js библиотеки, которые подобным занимаются.

Задача заключается в следующем:

У нас есть область с определенными размерами, в нашем случае это 1015x530. Она разделена пополам.
В левой части находятся изображения (div по умолчанию имеет высоту равную 200px и абсолютное позиционирование, а само изображение max-height 100%).
Каждое добавленное в область изображение накладывается друг на друга.
Необходимо при клике расположить изображения максимально грамотно, изменяя их размеры, относительно половины площади области и выровнять по центру.

Иными словами, сейчас так:
c33c6db2db2f0cde1e25e6112ce6635b.png

Нужно, чтобы скрипт старался максимально ровно все выровнять:
e430a9fd5ebdc00c2e21a71247068e9c.png

Быдло-код, который я написал, пытаясь решить эту проблему работает не так как нужно. Все выглядит примерно так:
https://i.gyazo.com/ea3bfa13856d58f4f086d7b4b66f3b...

https://jsfiddle.net/txo4uryc/

Заранее большое за любую помощь!
  • Вопрос задан
  • 241 просмотр
Пригласить эксперта
Ответы на вопрос 1
twobomb
@twobomb
Рекомендую обратить внимание на библиотеку masonry. Может это еще заинтересует.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы