jquery - 右から左に jQuery Isotope を使用するには?

Question

美しい美しいjQueryアイソトープ（GitHubのソース）で自動左揃えにオーバーライドするにはどうすればよいですか?

ありがとう！

Answer 1

Isotope のレイアウト ロジックを再設計するか、独自のレイアウト モードを構築するという 2 つのオプションがあります。

Isotope のレイアウト ロジックは、利用可能な場合は CSS 変換を使用するように徐々に強化されていますが、上/左の配置にフォール バックします。したがって、座標 x、y をメソッドに渡すと、またはgetPositionStylesが返されます。右から左へのレイアウトの問題は、 では機能しますが、同等の CSS 変換では機能しなくなることです。{ translate: [ x, y ] }{ left: x; top: y }{ right: x; top: y }

独自のレイアウト モードを構築することは、よりアクセスしやすいルートかもしれません。最終的には、独自のカスタム レイアウト モードを開発する方法に関するドキュメントを作成する必要があります。しかし、ソースを読めば自分でできるかもしれません。_layoutnameReset各レイアウト モードが 4 つの必須メソッドに分割されていることがわかり_layoutnameLayout _layoutnameGetContainerSizeます_layoutnameResize。

この機能リクエストのステータスを追跡できるように、GitHub でイシューをオープンしました。

Answer 2

商用テーマ (私の場合はワードプレスのテーマ) には jquery isotope が含まれている場合があり、右から左にするには、別のファイルでこれらの変更を行う必要があります - jquery.isotope.js ではなく jquery.isotope を変更する必要がありました。 min.js ファイル .

1 最初に find を使用して用語 (ctrl f) "positionAbs" を検索します。

「_positionAbs:function(a,b){return{left:a,top:b}」をこれに置き換えます

"_positionAbs:function(a,b){return{right:a,top:b}"

2 検索を使用して用語 (ctrl f) "transformsEnabled" を検索すると、" transformsEnabled:!0" が見つかります。これをこれに置き換えます。

" transformsEnabled:!1"

3 前の回答で述べたように、スタイル css を変更します。

Answer 3

最初: isotop タグを選択する必要があります。次に isOriginLeft: false

例: $(".isotopeContainer").isotope({ isOriginLeft: false });

Answer 4

jquery.isotop.min.js ファイルで次のように置き換えます。

this.usingTransforms&&(d.left=0,d.top=0)

と：

this.usingTransforms&&(d.right=0,d.top=0)

と：

translate3d("+a[0]+"px, "+a[1]+"px, 0),
translate("+a[0]+"px, "+a[1]+"px)

と：

translate3d("+(-a[0])+"px, "+a[1]+"px, 0)
translate("+(-a[0])+"px, "+a[1]+"px)