jquery Isotope Custom Layout: masonry bottom

Question

Has anyone seen a custom layout for isotope which is masonry from bottom up? It is not that complicated in the original Masonry plugin, as demonstrated here.

jQuery Masonry from bottom up

However, I am having difficulty translating this method to masonry layout in the unminified Isotope. Any suggestions would be much appreciated.

Answer 1

I have not seen any custom layout. But, recently I changed the Isotope's js to reflect the bottom up masonary.

On line 590, Change the following code

_positionAbs : function( x, y ) {   
  return { left: x, top: y };
},

to

_positionAbs : function( x, y ) {   
  return (this.options.fromBottom) ? { left: x, bottom: y } : { left: x, top: y };
},

and then set the fromBottom options to true while calling. Optionally, you can add the same property in $.Isotope.settings on line 330.

P.S. I know its been two months but it may help someone.

Answer 2

You’ll need to make the following changes:

Modify Isotope’s _positionAbs method Set transformsEnabled: false in the Isotope options Add CSS transition property styles for right/top.

$.Isotope.prototype._positionAbs = function( x, y ) {
   return { right: x, top: y };
};

// initialize Isotope
$('#container').isotope({
    transformsEnabled: false
    // other options...
});

and

.isotope .isotope-item {
-webkit-transition-property: right, top, -webkit-transform, opacity;
 -moz-transition-property: right, top, -moz-transform, opacity;
  -ms-transition-property: right, top, -ms-transform, opacity;
   -o-transition-property: right, top, -o-transform, opacity;
      transition-property: right, top, transform, opacity;
}