jquery同位素自定义布局:砖石底部

jquery Isotope Custom Layout: masonry bottom

本文关键字：石底部 布局 同位素 自定义 jquery      更新时间：2023-09-26

有人见过同位素的自定义布局吗？它在最初的Masonry插件中并没有那么复杂，如这里所示。

jQuery砖石自下而上

然而，我很难将这种方法转化为未混合同位素中的砖石布局。任何建议都将不胜感激。

我没有看到任何自定义布局。但是，最近我改变了同位素的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中添加相同的属性。

附言：我知道已经两个月了，但它可能会帮助一些人。

您需要进行以下更改：

修改同位素的_positionAbs方法在同位素选项中设置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;
}
相关文章：