---
title: jQuery Masonry
layout: default
category: homepage
has_modernizr: true
mini_bricks: 
  - w1 h1
  - w1 h1
  - w1 h2
  - w1 h1
  - w2 h1
  - w1 h2
  - w1 h1
  - w2 h2
  - w2 h1
  - w1 h1
  - w2 h2
  - w2 h1
---


<div id="container" class="transitions-enabled clearfix">
  
  <div class="item big-text col2">
    A dynamic layout plugin for jQuery<br />
    The flip-side of CSS floats<br />
    <br />
    &larr; View docs and demos
  </div>
  
  <div class="item big-text">
    Before: CSS Floats
    <div class="mini">
      {% for brick in page.mini_bricks %}
        <div class="{{ brick }}">{{ forloop.index }}</div>
      {% endfor %}
    </div>
  </div>
  
  <div class="item big-text">
    After: Masonry
    <div id="mini-container" class="mini">
      {% for brick in page.mini_bricks %}
        <div class="{{ brick }}">{{ forloop.index }}</div>
      {% endfor %}
    </div>
  </div>
  
  <div class="item link">
    <a href="jquery.masonry.min.js">Download the script jquery.&#8203;masonry.&#8203;min.js</a>
  </div>
  
  <div class="item link">
    <a href="http://meta.metafizzy.co/files/masonry-site.zip">Download this project</a>
  </div>
  
  <div class="item link">
    <a href="https://github.com/desandro/masonry">Masonry on GitHub</a>
  </div>
  
  <div class="item big-text loading">
    <img src="http://i.imgur.com/6RMhx.gif" />
    Loading Examples
  </div>

  <div class="item big-text col2">
    Also try <a href="http://vanilla-masonry.desandro.com">Vanilla Masonry</a>.<br />
    <span style="font-size: 0.6em; font-weight: 400;">Just like jQuery Masonry, but without the jQuery. <em>It&rsquo;s delicious!</em></span>
  </div>

  <div class="item col2 bower">
    <p>If you are cool with the command line,<br>
      install jQuery Masonry as a <a href="http://twitter.github.com/bower">Bower</a> package:</p>
    <pre><code>bower install jquery-masonry</code></pre>
  </div>

</div> <!-- #container -->

<script src="{{ site.jquery_js }}"></script>
<script src="{{ site.masonry_js }}"></script>
<script>
  $(function(){
    
    var $container = $('#container');
    
    $('#mini-container').masonry({
      columnWidth: 50
    });
    
    $container.masonry({
      itemSelector: '.item',
      columnWidth: 240,
      isAnimated: !Modernizr.csstransitions
    });
    
    // Sites using Masonry markup
    var $sites = $('#sites'),
        $loadingItem = $container.find('.loading');
        
    var ajaxError = function(){
      $loadingItem.text('Could not load examples :(');
    };
    
    // dynamically load sites using Masonry from Zootool
    $.getJSON('http://zootool.com/api/users/items/?username=desandro' +
        '&apikey=8b604e5d4841c2cd976241dd90d319d7' +
        '&tag=bestofmasonry&callback=?')
      .error( ajaxError )
      .success(function( data ){
        
        // proceed only if we have data
        if ( !data || !data.length ) {
          ajaxError();
          return;
        }
        var items = [],
            item, datum;
        
        for ( var i=0, len = data.length; i < len; i++ ) {
          datum = data[i];
          item = '<div class="item example"><a href="' + datum.url + '">'
            + '<img src="' + datum.image.replace('/l.', '/m.') + '" />'
            + '<b>' + datum.title + '</b>'
            + '</a></div>';
          items.push( item );
        }
        
        var $items = $( items.join('') );
        $items.imagesLoaded(function(){
          $container
            .masonry( 'remove', $loadingItem ).masonry()
            .append( $items ).masonry( 'appended', $items, true );
        });
        
      });
    
  });
</script>