Created
October 4, 2012 19:35
-
-
Save mattstauffer/3835881 to your computer and use it in GitHub Desktop.
Isotope Centered with Gutters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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 | |
}; | |
}; |
Forked and modified: https://gist.github.com/beausmith/4760823
(Your shadows may have been cut off because of overflow: hidden
css.)
Is there any way to make the overflow: hidden not be there so that the shadows are not being cut off?
Nevermind, the fix for that is here metafizzy/isotope#217
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
Very nice work! Plugged in fine with https://github.com/philipbjorge/Infinite-Social-Wall as well