Skip to content

Instantly share code, notes, and snippets.

@mattstauffer
Created October 4, 2012 19:35
Show Gist options
  • Save mattstauffer/3835881 to your computer and use it in GitHub Desktop.
Save mattstauffer/3835881 to your computer and use it in GitHub Desktop.
Isotope Centered with Gutters
// Tweaked form of Isotope gutters hack ( https://gist.github.com/2574891 ) and
// centered masonry hack (http://isotope.metafizzy.co/custom-layout-modes/centered-masonry.html )
//
// No guarantees; there are even @todos and FIXMEs in here. This is just what I cobbled together
// for a particular project, and I only tweaked it enough to be sure it worked on that project.
$.Isotope.prototype._getMasonryGutterColumns = function() {
// Tweak: Renamed call of this.options.masonry to this.options (not sure why it was wrong in example)
var gutter = this.options.gutterWidth || 0;
var $parent = this.element.parent();
// It's ugly, but this hides the slides and gets the parent width *before* slides, for comparison
// Not always necessary, but was in some instances
this.element.hide();
containerWidth = $parent.width();
this.element.show();
this.masonry.columnWidth = this.options && this.options.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;
containerWidth += gutter;
this.masonry.cols = Math.floor(containerWidth / 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._getCenteredMasonryColumns(); // Might not need it with the new, simpler gutters code
this._getMasonryGutterColumns();
var i = this.masonry.cols;
this.masonry.colYs = [];
while (i--) {
this.masonry.colYs.push( 0 );
}
};
$.Isotope.prototype._masonryResizeChanged = function() {
var prevColCount = this.masonry.cols;
// get updated colCount
this._getMasonryGutterColumns();
return ( this.masonry.cols !== prevColCount );
};
$.Isotope.prototype._masonryGetContainerSize = function() {
var unusedCols = 0,
i = this.masonry.cols;
// count unused columns
while ( --i ) {
if ( this.masonry.colYs[i] !== 0 ) {
break;
}
unusedCols++;
}
return {
height : Math.max.apply( Math, this.masonry.colYs ),
// fit container to columns that have been used;
// @todo: Do we need to subtract one gutter to even it out? Nope, that cuts off the shadows.
// @todo: Some how we need to make it so there's half a left gutter added to the element with left-padding.
width : (this.masonry.cols - unusedCols) * this.masonry.columnWidth
};
};
@blackstalk
Copy link

Very nice work! Plugged in fine with https://github.com/philipbjorge/Infinite-Social-Wall as well

@beausmith
Copy link

Forked and modified: https://gist.github.com/beausmith/4760823

(Your shadows may have been cut off because of overflow: hidden css.)

@rclai
Copy link

rclai commented Jun 12, 2013

Is there any way to make the overflow: hidden not be there so that the shadows are not being cut off?

@rclai
Copy link

rclai commented Jun 12, 2013

Nevermind, the fix for that is here metafizzy/isotope#217

@dghez
Copy link

dghez commented Feb 21, 2014

For me it doesn't work :/
" $.Isotope.prototype._getCenteredMasonryColumns = function() { " is the error

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment