javascript - jqueryアイソトープカスタムレイアウト：組積造の下部

Question

下から上に石積みである同位体のカスタムレイアウトを見た人はいますか？ここに示されているように、元のMasonryプラグインではそれほど複雑ではありません。

jQuery組積造を下から上に

ただし、このメソッドを、縮小されていないアイソトープの組積造レイアウトに変換するのは困難です。任意の提案をいただければ幸いです。

Answer 1

カスタムレイアウトは見たことがありません。しかし、最近、ボトムアップの石積みを反映するようにアイソトープの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に同じプロパティを追加できます。

PS私はそれが2か月であることを知っていますが、それは誰かを助けるかもしれません。

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