Filter & sort magical layouts http://isotope.metafizzy.co
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

148 lines
3.9 KiB

---
title: Masonry gutters
layout: default
category: custom-layout-modes
---
<style>
.element {
margin: 5px 0;
}
#container {
padding: 5px 0;
}
</style>
<section id="copy">
<p><a href="../docs/layout-modes.html#modified_layout_modes">Modified masonry layout mode</a> 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>