Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

138 lines (114 sloc) 3.645 kb
---
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>
Jump to Line
Something went wrong with that request. Please try again.