// 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 }; };