---
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">
    The flip-side of CSS floats
  </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> <!-- #container -->

<script src="{{ page.root_path }}{{ site.jquery_js }}"></script>
<script src="{{ page.root_path }}{{ 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 Ember app
    $.getJSON('http://api.emberapp.com/users/view/' + 
                'desandro/collections/view/jquery-masonry.json?callback=?')
      .error( ajaxError )
      .success(function( data ){
        
        // proceed only if we have images
        if ( !data.response || !data.response.images ) {
          ajaxError();
          return;
        }
        var images = data.response.images,
            items = [],
            item, image;
        
        for ( var i=0, len = images.length; i < len; i++ ) {
          image = images[i];
          item = '<div class="item example"><a href="' + image.url + '">'
            + '<img src="' + image.file.src.replace('/m.', '/s.') + '" />'
            + '<b>' + image.name + '</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>