How to center isotope in packery layout mode?

[Luxbit]

Hi there,

I'm trying to center the isotope container.
I found this http://jsfiddle.net/desandro/P6JGY/6/ and it works fine for Masonry, but I can't get it to work with the packery layout mode.

Any ideas?

Thanks

Best Regards

Koopax

[desandro]

Centering isn't a full-fledged feature for Packery. See metafizzy/packery#8 There is a hack solution, but I haven't tried it out for Isotope Packery layout mode. If you would like to see this feature please +1

[Luxbit]

+1

[daweedm]

+1

[desandro]

Here's a solution. I put together this CodePen: http://codepen.io/desandro/pen/wBxvKe

// overwrite Packery methods
var PackeryMode = Isotope.LayoutMode.modes.packery;
var __resetLayout = PackeryMode.prototype._resetLayout;
PackeryMode.prototype._resetLayout = function() {
  __resetLayout.call( this );
  // reset packer
  var parentSize = getSize( this.element.parentNode );
  var colW = this.columnWidth + this.gutter;
  this.fitWidth = Math.floor( ( parentSize.innerWidth + this.gutter ) / colW ) * colW;
  this.packer.width = this.fitWidth;
  this.packer.height = Number.POSITIVE_INFINITY;
  this.packer.reset();
};

PackeryMode.prototype._getContainerSize = function() {
  // remove empty space from fit width
  var emptyWidth = 0;
  for ( var i=0, len = this.packer.spaces.length; i < len; i++ ) {
    var space = this.packer.spaces[i];
    if ( space.y === 0 && space.height === Number.POSITIVE_INFINITY ) {
      emptyWidth += space.width;
    }
  }

  return {
    width: this.fitWidth - this.gutter,
    height: this.maxY - this.gutter
  };
};

// always resize
PackeryMode.prototype.needsResizeLayout = function() {
  return true;
};

[principleCol]

+1