Skip to content

Instantly share code, notes, and snippets.

@adamkdean

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

Forked from beausmith/isotope-centered-masonry-and-masonry-gutters.js
Created July 10, 2013 10:56
Download ZIP

Revisions

  1. @beausmith beausmith revised this gist Feb 12, 2013. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion isotope-centered-masonry-and-masonry-gutters.js
    View file
    Original file line number Diff line number Diff line change
    @@ -42,7 +42,7 @@ $(function() {
    if ( this.masonry.colYs[i] !== 0 ) {
    break;
    }
    unusedCols++;
    unusedCols++;
    }
    return {
    height : Math.max.apply( Math, this.masonry.colYs ),
  2. @beausmith beausmith revised this gist Feb 12, 2013. 1 changed file with 4 additions and 0 deletions.
    4 changes: 4 additions & 0 deletions isotope-centered-masonry-and-masonry-gutters.js
    View file
    Original file line number Diff line number Diff line change
    @@ -2,6 +2,10 @@ $(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;
  3. @beausmith beausmith revised this gist Feb 12, 2013. 2 changed files with 57 additions and 74 deletions.
    74 changes: 0 additions & 74 deletions gistfile1.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,74 +0,0 @@
    // 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
    };
    };
    57 changes: 57 additions & 0 deletions isotope-centered-masonry-and-masonry-gutters.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,57 @@
    $(function() {

    // Tweaked from: https://gist.github.com/mattstauffer/3835881
    // No guarantees

    $.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
    }
    });

    });
  4. @mattstauffer mattstauffer created this gist Oct 4, 2012.
    74 changes: 74 additions & 0 deletions gistfile1.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,74 @@
    // 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
    };
    };