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

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://ift.tt/Ka3mr3

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