Аккуратно размещайте изображения разных размеров в сетке

Question

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

Как это сделать, используя CSS или JS?

Answer 1

Существуют различные компоновки js библиотеки уже присутствуют как

1. Packery
2. Masonry
3. Gridster
4. Flex
5. Waterfall
6. Blockslt

Вы можете проверить how to replicate pinterest.com's absolute div stacking layout

Answer 2

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

<div id="image-container"> 
    <img src="http://fakeimg.pl/300/"> 
    <img src="http://fakeimg.pl/250x100/"> 
    ... 
</div> 

#image-container { 
    line-height: 0; 

    -webkit-column-count: 5; 
    -webkit-column-gap: 0px; 
    -moz-column-count: 5; 
    -moz-column-gap:  0px; 
    column-count:   5; 
    column-gap:   0px; 
}