Как сделать динамически изменяемые размеры фотографии?

Question

[mrrangerr]

Добрый вечер. Делаю приложение с помощью API Unsplash и React. Как реализовать загрузку изображении которые приходят с API так чтобы они заполняли пустое пространство и вставали рядом друг с другом?
Нужно сделать как на скрине. Спасибо!

Comments

[Rustam Bainazarov]

https://masonry.desandro.com/

[mrrangerr]

Рустам Байназаров, Спасибо большое!!

[Rustam Bainazarov]

mrrangerr, ну или иной другой скрипт для masonry-layout.

CSS-подходы имеют свои ограничения, поэтому JS.

Answer 1

[Павел Атайкин]

Такая раскладка называется "Masonry Layout". Соотвественно самый простой способ - это использовать готовые плагины для react например этот: https://www.npmjs.com/package/react-masonry-component
Если нужно разработать "свой" механизм, то гугли по названию раскладки.
P.S. Если не требуется соблюдать иерархию картинок, то можно использовать css свойство column-count пример реализации можно посмотреть здесь: https://w3bits.com/css-masonry/