Have you ever heard of the jQuery masonry plugin? It's a great tool for placing images in "blocks" instead of trying to squeeze them into empty spaces. Take a look at this explanation:
But how can we minimize those pesky "voids"?
HTML:
<!-- This overlay has 100% height, no scroll bar and fixed position -->
<div class='overlay-container'>
<!-- The inner container is scrollable: -->
<div class='row' id='ms-container'>
<!-- Masonry items... -->
<div class='col-md-4 ms-item'>
<div class='boxcontainer'>
<img src="photo.png" />
<h1>
<a href='#'>
activity_2
</a>
</h1>
</div>
</div>
<!-- More items... -->
</div>
</div>
JavaScript:
var $container = $('#ms-container');
$container.imagesLoaded(function() {
$container.masonry({
itemSelector: '.ms-item',
columnWidth: '.ms-item',
transitionDuration: 0.4
});
});
CSS:
.overlay-container {
height: 100% !important;
position: absolute;
top:0px;
width: 58%;
left: 30px;
padding: 50px 10px 10px 10px;
overflow-y: auto;
overflow-x: hidden;
}
.boxcontainer {
border:1px solid #ededed;
background:#fff;
font-size:13px;
text-align:center;
transition:border 500ms ease-out;
border-bottom:medium double #ddd;
position:relative;
overflow:hidden;
}