mirror of https://github.com/metafizzy/isotope
David DeSandro
14 years ago
7 changed files with 172 additions and 26 deletions
@ -0,0 +1,148 @@
|
||||
--- |
||||
title: masonry gutters |
||||
layout: default |
||||
category: tests |
||||
--- |
||||
|
||||
<style> |
||||
.element { |
||||
margin: 5px 0; |
||||
} |
||||
|
||||
#container { |
||||
padding: 5px 0; |
||||
} |
||||
</style> |
||||
|
||||
<section id="copy"> |
||||
<p>Modified masonry layout mode methods for gutterWidth. The items have no padding, so they can be lined-up horizontally adjacent to the container.</p> |
||||
<p>Set <code>gutterWidth</code> within <code>masonry</code> options.</p> |
||||
|
||||
{% highlight javascript %} |
||||
|
||||
$('#container').isotope({ |
||||
masonry: { |
||||
columnWidth: 110, |
||||
gutterWidth: 10 |
||||
} |
||||
}); |
||||
|
||||
{% endhighlight %} |
||||
|
||||
</section> |
||||
|
||||
<section id="options" class="clearfix"> |
||||
|
||||
{% include filter-buttons.html %} |
||||
|
||||
{% include sort-buttons.html %} |
||||
|
||||
<h3>Etc</h3> |
||||
|
||||
<ul id="etc" class="clearfix"> |
||||
<li id="toggle-sizes"><a href="#toggle-sizes">Toggle variable sizes</a></li> |
||||
<li id="insert"><a href="#insert">Insert new elements</a></li> |
||||
<li id="append"><a href='#append'>Append new elements</a></li> |
||||
<li id="shuffle"><a href='#shuffle'>Shuffle</a></li> |
||||
</ul> |
||||
|
||||
</section> <!-- #options --> |
||||
|
||||
<div id="container" class="clickable clearfix"> |
||||
{% for elem_number in site.best_of_order %} |
||||
{% assign element = site.elements[elem_number] %} |
||||
{% include element-partial.html %} |
||||
{% endfor %} |
||||
</div> <!-- #container --> |
||||
|
||||
|
||||
<script src="../{{ site.jquery_js }}"></script> |
||||
<script src="../{{ site.isotope_js }}"></script> |
||||
<script src="../js/fake-element.js"></script> |
||||
<script> |
||||
|
||||
// modified Isotope methods for gutters in masonry |
||||
$.Isotope.prototype._getMasonryGutterColumns = function() { |
||||
var gutter = this.options.masonry && this.options.masonry.gutterWidth || 0; |
||||
containerWidth = this.element.width(); |
||||
|
||||
this.masonry.columnWidth = this.options.masonry && this.options.masonry.columnWidth || |
||||
// or use the size of the first item |
||||
this.$filteredAtoms.outerWidth(true) || |
||||
// if there's no items, use size of container |
||||
containerWidth; |
||||
|
||||
this.masonry.columnWidth += gutter; |
||||
|
||||
this.masonry.cols = Math.floor( ( containerWidth + gutter ) / this.masonry.columnWidth ); |
||||
this.masonry.cols = Math.max( this.masonry.cols, 1 ); |
||||
}; |
||||
|
||||
$.Isotope.prototype._masonryReset = function() { |
||||
// layout-specific props |
||||
this.masonry = {}; |
||||
// FIXME shouldn't have to call this again |
||||
this._getMasonryGutterColumns(); |
||||
var i = this.masonry.cols; |
||||
this.masonry.colYs = []; |
||||
while (i--) { |
||||
this.masonry.colYs.push( 0 ); |
||||
} |
||||
}; |
||||
|
||||
$.Isotope.prototype._masonryResizeChanged = function() { |
||||
var prevSegments = this.masonry.cols; |
||||
// update cols/rows |
||||
this._getMasonryGutterColumns(); |
||||
// return if updated cols/rows is not equal to previous |
||||
return ( this.masonry.cols !== prevSegments ); |
||||
}; |
||||
|
||||
|
||||
$(function(){ |
||||
|
||||
var $container = $('#container'); |
||||
|
||||
{% include random-sizes.js %} |
||||
|
||||
$container.isotope({ |
||||
itemSelector : '.element', |
||||
masonry : { |
||||
columnWidth : 110, |
||||
gutterWidth : 10 |
||||
}, |
||||
getSortData : { |
||||
symbol : function( $elem ) { |
||||
return $elem.attr('data-symbol'); |
||||
}, |
||||
category : function( $elem ) { |
||||
return $elem.attr('data-category'); |
||||
}, |
||||
number : function( $elem ) { |
||||
return parseInt( $elem.find('.number').text(), 10 ); |
||||
}, |
||||
weight : function( $elem ) { |
||||
return parseFloat( $elem.find('.weight').text().replace( /[\(\)]/g, '') ); |
||||
}, |
||||
name : function ( $elem ) { |
||||
return $elem.find('.name').text(); |
||||
} |
||||
} |
||||
}); |
||||
|
||||
{% include option-set-buttons.js %} |
||||
|
||||
{% include add-buttons.js %} |
||||
|
||||
{% include change-sizes.js %} |
||||
|
||||
var $sortBy = $('#sort-by'); |
||||
$('#shuffle a').click(function(){ |
||||
$container.isotope('shuffle'); |
||||
$sortBy.find('.selected').removeClass('selected'); |
||||
$sortBy.find('[data-option-value="random"]').addClass('selected'); |
||||
return false; |
||||
}); |
||||
|
||||
}); |
||||
</script> |
||||
Loading…
Reference in new issue