Masonry

by technotarek

HTML

<script src="http://masonry.desandro.com/jquery.masonry.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css">
<div class="container">
    <div class="row">
        <div class="span12">
<div id='masonContainer'>
<div class='item-masonry'><img src='http://www.technotarek.com/uploads/db_files/thumb_godfather.jpg' alt='The Godfather' width='67' height='100'></div><div class='item-masonry'><img src='http://www.technotarek.com/uploads/db_files/thumb_mario-godson.jpg' alt='The Godson' width='100' height='63'></div><div class='item-masonry'><img src='http://www.technotarek.com/uploads/db_files/thumb_stgilles.jpg' alt='St. Gilles' width='100' height='57'></div><div class='item-masonry'><img src='http://www.technotarek.com/uploads/db_files/thumb_games.jpg' alt='Les Jeux' width='100' height='96'></div><div class='item-masonry'><img src='http://www.technotarek.com/uploads/db_files/thumb_anthropologist.jpg' alt='Anthropologist' width='100' height='75'></div><div class='item-masonry'><img src='http://www.technotarek.com/uploads/db_files/thumb_laroche.jpg' alt='La Roche' width='100' height='75'></div><div class='item-masonry'><img src='http://www.technotarek.com/uploads/db_files/thumb_fenetre.jpg' alt='Fenetre à la Roche' width='76' height='100'></div><div class='item-masonry'><img src='http://www.technotarek.com/uploads/db_files/thumb_simca_at_limours.jpg' alt='Simca à Limours' width='100' height='67'></div><div class='item-masonry'><img src='http://www.technotarek.com/uploads/db_files/thumb_parked.jpg' alt='Valet' width='75' height='100'></div><div class='item-masonry'><img src='http://www.technotarek.com/uploads/db_files/thumb_hitchcock.jpg' alt='Hitchcockpit' width='100' height='62'></div><div class='item-masonry'><img src='http://www.technotarek.com/uploads/db_files/thumb_chante.jpg' alt='Chante' width='75' height='100'></div><div class='item-masonry'><img...

CSS

div.item-masonry {
        float:left;
        margin:10px;
        width: 120px;
    }

JavaScript

var $masonContainer = $('#masonContainer');
        $masonContainer.imagesLoaded(function(){
          $masonContainer.masonry({
            itemSelector : '.item-masonry'
          });
        });