Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

131 lines (108 sloc) 3.249 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">
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 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.