Isotope with Centered Masonry and Masonry Gutters.

isotope-centered-masonry-and-masonry-gutters.js

$(function() {

  // Tweaked from: https://gist.github.com/mattstauffer/3835881
  // No guarantees
  // 1. include Isotope.js
  // 2. include this file
  // 3. customize Isotope options at the bottom of this file
  // 4. add "margin: 0 auto" to the isotope container

  $.Isotope.prototype._getMasonryGutterColumns = function() {
    var gutter = this.options.masonry.gutterWidth || 0;
    containerWidth = this.element.parent().width();
    this.masonry.columnWidth = this.options && this.options.masonry.columnWidth ||
      this.$filteredAtoms.outerWidth(true) ||
      containerWidth;
    this.masonry.columnWidth += gutter;
    this.masonry.cols = Math.floor(containerWidth / this.masonry.columnWidth);
    this.masonry.cols = Math.max(this.masonry.cols, 1);
  };

  $.Isotope.prototype._masonryReset = function() {
    this.masonry = {};
    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;
    this._getMasonryGutterColumns();
    return ( this.masonry.cols !== prevColCount );
  };

  $.Isotope.prototype._masonryGetContainerSize = function() {
    var gutter = this.options.masonry.gutterWidth || 0;
    var unusedCols = 0,
      i = this.masonry.cols;
    while ( --i ) {
      if ( this.masonry.colYs[i] !== 0 ) {
        break;
      }
      unusedCols++;
    }
    return {
      height : Math.max.apply( Math, this.masonry.colYs ),
      width : ((this.masonry.cols - unusedCols) * this.masonry.columnWidth) - gutter
    };
  };


  $('.container').isotope({
    masonry: {
      columnWidth: 100,
      gutterWidth: 5
    }
  });

});

Thanks for this.

This is great. Thanks!

Thanks!!!! SOOOOOO helpful!

Thanks a lot. Really helpful indeed.

Has anyone managed to combine this code with filtering? Not having any luck whatsoever.

http://www.playground.neonsolutions.com.au/neongroup/events/

This was very helpful thanks. I've forked to fix the gutter calculation though, there should be one less gutter than columns - https://gist.github.com/tc33/9215078