javascript - jquery同位素自定义布局：砌体底部

Question

有没有人见过自下而上砌体的同位素定制布局？正如这里所展示的，原始 Masonry 插件中并没有那么复杂。

jQuery Masonry 自下而上

但是，我很难将这种方法转换为未缩小同位素中的砌体布局。任何建议将不胜感激。

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

您需要进行以下更改：

修改 Isotope 的 _positionAbs 方法 在 Isotope 选项中设置 transformsEnabled: false 为 right/top 添加 CSS 过渡属性样式。

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

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

和

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