jQuery Masonry simple example

jQuery Masonry simple example

HTML

<script src="http://masonry.desandro.com/masonry.pkgd.min.js"></script>
<div id="container" class='content'>
    <div class='item' id="box1"></div>
    <div class='item' id="box2"></div>
    <div class='item' id="box3"></div>
    <div class='item' id="box4"></div>
</div>

CSS

.content{
width:100%;;
height:100%;
display:inline-block;
}
.content div{
     border-color:black;
    border-style:solid;
    border-width:2px;
    display:inline-block;
    width:30%;
    vertical-align:top;
    float: left;
    margin: 5px;
}
#box1{
   height:50px; 
}
#box2{
   height:100px;
}
#box3{
   height:30px;
}
#box4{
   height: 130px;
}

JavaScript

$( function() {

    $('#container').masonry({
        itemSelector: '.item',
        columnWidth: 70
    });

});