public
Last active

jQuery extension of Isotope to allow the use of gutterWidth

  • Download Gist
isotope-gutter-width.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36
// Modified Isotope methods for gutters in masonry
$.Isotope.prototype._getMasonryGutterColumns = function() {
var gutter = this.options.masonry && this.options.masonry.gutterWidth || 0;
containerWidth = this.element.width();
 
this.masonry.columnWidth = this.options.masonry && this.options.masonry.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;
 
this.masonry.cols = Math.floor((containerWidth + gutter) / 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._getMasonryGutterColumns();
var i = this.masonry.cols;
this.masonry.colYs = [];
while (i--) {
this.masonry.colYs.push(0);
}
};
 
$.Isotope.prototype._masonryResizeChanged = function() {
var prevSegments = this.masonry.cols;
// Update cols/rows
this._getMasonryGutterColumns();
// Return if updated cols/rows is not equal to previous
return (this.masonry.cols !== prevSegments);
};

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.