Как настроить изображения различного размера, чтобы занять все пространство между ними

Question

Привет, Я пытаюсь создать фото-дисплей, где я могу перечислить несколько изображений разного размера таким образом, чтобы они могли вписаться в различные пространства без оставляя пустые места. пример того, что я пытаюсь достичь можно наблюдать на этом сайте: http://www.morgannorman.com/

Вот предварительный просмотр моего HTML и как я настроил изображения:

<div class="feature-list"> <div class="feat" id="one"> <img src="galleries/display/pic1.jpg"> <img src="galleries/display/pic6.jpg"> <img src="galleries/display/pic3.jpg"> <img src="galleries/display/pic4.jpg"> <img src="galleries/display/pic5.jpg"> <img src="galleries/display/pic2.jpg"> <img src="galleries/display/pic3.jpg"> <img src="galleries/display/pic4.jpg"> <img src="galleries/display/pic1.jpg"> <img src="galleries/display/pic2.jpg"> <img src="galleries/display/pic3.jpg"> <img src="galleries/display/pic4.jpg"> </div> </div>

и мой CSS:

.feature-list { 
    width: 100%; 
    padding: 10% 0; 
} 

.feat { 
    width: 100%; 
    position: relative; 
} 

.feat img { 
    width: 25%; 
    float: left; 
} 

Answer 1

Просто используйте masonary плагин: http://masonry.desandro.com/

После вас включите ваш плагин, инициализируйте его так:

$('.feat').masonry({ 
    columnWidth: 200, 
    itemSelector: 'img' 
});