How do I set up varying sized images to occupy all the space between them

Question

Hi I am trying to create a photo display where I can list multiple images of varying size in a way that would allow them to fit in the various spaces without leaving blank spots. an example of what I am trying to achieve can be observed on this site: http://www.morgannorman.com/

Here is a preview of my html and how I have set up the images:

<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>

and my CSS:

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

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

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

Answer 1

Just use the masonary plugin: http://masonry.desandro.com/

After you include your plugin init it like this

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