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;
}
Just use the masonary plugin: http://masonry.desandro.com/
After you include your plugin init it like this
$('.feat').masonry({
columnWidth: 200,
itemSelector: 'img'
});