testing masonry again

by dirkk0

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/masonry/2.1.05/jquery.masonry.min.js"></script>
<div class="container cols">
        <img class="box" width="300" height="220" src="http://farm9.staticflickr.com/8436/7787073628_5fff9a70d1_n.jpg" alt="Yahoo! Hack 2012 India">
        <div class="box one"></div>
        <div class="box two"></div>
        <img class="box" width="300" height="202" src="http://farm9.staticflickr.com/8431/7787083378_933c87b6fd_n.jpg" alt="Reid Burke Node.js Presentation">
        <div class="box one"></div>
        <img class="box" width="300" height="300" src="http://farm9.staticflickr.com/8360/8332274557_25fc9df0d9_n.jpg" alt="Good Read on a Lazy Afternoon">                
        <div class="box three"></div>
        <img width="300" height="225" src="http://farm9.staticflickr.com/8448/7787081028_39feaf1405_n.jpg" alt="Pictrendz Winners" class="box">
        <div class="box two"></div>
        <img class="box" width="300" height="300" height="202" src="http://farm9.staticflickr.com/8075/8321349902_e89372006b_n.jpg" alt="Afternoon Workspace">
        <div class="box five"></div>
        <div class="box one"></div>
        <img width="300" height="225" src="http://farm5.staticflickr.com/4148/5083309354_cb2dc8c911_n.jpg" alt="Durga Puja" class="box">
        <div class="box two"></div>
        <img width="300" height="225" src="http://farm4.staticflickr.com/3482/3948152628_66ea9d4856_n.jpg" alt="Frog" class="box">
        <div class="box six"></div>
        <img class="box" width="300" height="202" src="http://farm8.staticflickr.com/7117/7787080134_2cd4f6dcf8_n.jpg" alt="Winning Moments">
        <div class="box three"></div>
        <img width="300" height="225" src="http://farm3.staticflickr.com/2774/4019603631_890528fd86_n.jpg" alt="Diyas" class="box">
        <div class="box two"></div>
    </div>

CSS

.box{
    display: inline-block;
    width: 300px;
    margin-bottom: 20px;
    -webkit-transition-property: left,right,top;
    -moz-transition-property: left,right,top;
    -ms-transition-property: left,right,top;
    -o-transition-property: left,right,top;
    transition-property: left,right,top;
    -webkit-transition-duration: 0.6s;
    -moz-transition-duration: 0.6s;
    -ms-transition-duration: 0.6s;
    -o-transition-duration: 0.6s;
    transition-duration: 0.6s;
}

.cols{
    -moz-column-count:3;
    -moz-column-gap: 10px;
    -webkit-column-count:3;
    -webkit-column-gap: 10px;
    column-count: 3;
    column-gap: 10px;
}

JavaScript

$(document).ready(function(){
    $('.container').masonry({
      itemSelector: '.box',
      columnWidth: 300,
      gutterWidth: 20
    });
});