jquery同位素自定义布局：砌体底部答案

【问题标题】：jquery Isotope Custom Layout: masonry bottomjquery同位素自定义布局：砌体底部
【发布时间】：2012-03-22 10:12:49
【问题描述】：

有没有人见过自下而上砌体的同位素自定义布局？原来的 Masonry 插件并没有那么复杂，如下所示。

jQuery Masonry from bottom up

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

【问题讨论】：

标签： javascript jquery jquery-isotope

【解决方案1】：

我还没有看到任何自定义布局。但是，最近我更改了 Isotope 的 js 以反映自下而上的砌体。

590行，修改如下代码

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

到

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

然后在调用时将 fromBottom 选项设置为 true。或者，您可以在第 330 行的 $.Isotope.settings 中添加相同的属性。

附：我知道已经两个月了，但它可能会对某人有所帮助。

【讨论】：

【解决方案2】：

您需要进行以下更改：

修改 Isotope 的 _positionAbs 方法在同位素选项中设置 transformsEnabled: false 为右/上添加 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;
}

【讨论】：