jQuery Masonry Blocks

Blocks auto size to fit the width and squish next to each other.

by AJIEKCEU

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/masonry/2.1.07/jquery.masonry.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>

<div class="container masonry">
    <div class="block masonry-brick large"></div>
    <div class="block masonry-brick large"></div>
    <div class="block masonry-brick large"></div>
    <div class="block masonry-brick large"></div>
    <div class="block masonry-brick large"></div>
    <div class="block masonry-brick large"></div>
    <div class="block masonry-brick large"></div>
    <div class="block masonry-brick large"></div>
    <div class="block masonry-brick large"></div>
    <div class="block masonry-brick large"></div>
    <div class="block masonry-brick large"></div>
    <div class="block masonry-brick large"></div>
    <div class="block masonry-brick large"></div>
    <div class="block masonry-brick large"></div>
    <div class="block masonry-brick large"></div>
    <div class="block masonry-brick large"></div>
    <div class="block masonry-brick large"></div>
    <div class="block masonry-brick large"></div>
    <div class="block masonry-brick large"></div>
    <div class="block masonry-brick large"></div>
    <div class="block masonry-brick large"></div>
    <div class="block masonry-brick large"></div>
</div>

CSS

.container
{
}

.block
{
   float: left;
    margin: 5px;
}

.block.large
{
    width: 200px;
    height: 200px;
    
    background: #c24444;
}

.block.medium
{
    width: 120px;
    height: 80px;
    
    background: #c29744;
}

.block.small
{
    width: 80px;
    height: 40px;
    
    background: #bbc244;
}





/**** Transitions ****/
.masonry,
.masonry .masonry-brick {
  -webkit-transition-duration: 0.7s;
     -moz-transition-duration: 0.7s;
      -ms-transition-duration: 0.7s;
       -o-transition-duration: 0.7s;
          transition-duration: 0.7s;
}

.masonry {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
      -ms-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
}

.masonry .masonry-brick {
  -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;
}

JavaScript

$('.container').masonry({
    // options
    itemSelector : '.block',
    isAnimated: !Modernizr.csstransitions
});