gistfile1.js

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