How to use jQuery Isotope in Right-to-Left?

问题:

How can I override to automatic left-alignment in the beautiful-beautiful jQuery Isotope (Source on GitHub)?

Thanks!

回答1:

You have two options: Re-engineer Isotope's layout logic, or build your own layout mode.

Isotope's layout logic is progressively enhanced to use CSS transforms when available, but fall back to top/left positioning. So if you pass in coordinates x, y to the getPositionStyles method it will either return with { translate: [ x, y ] } or { left: x; top: y }. The problem with right-to-left layouts is that it would work with { right: x; top: y }, but it would break with the CSS transform equivalent.

Building your own layout mode might be the more accessible route. Eventually I need to write the docs as to how to develop your own custom layout mode. But you might able to do it yourself by reading the source. You'll find that each layout mode is broken up into 4 required methods _layoutnameReset, _layoutnameLayout _layoutnameGetContainerSize and _layoutnameResize.

I have opened an issue on GitHub so you can track status on this feature request.

回答2:

sometimes commercial themes (in my case a wordpress theme) include the jquery isotope ,and then to make it right to left you need to make these changes in another file - had to change not the jquery.isotope.js but the jquery.isotope.min.js file .

1 first use find to search for the terms (ctrl f) "positionAbs" you will find

"_positionAbs:function(a,b){return{left:a,top:b}" replace it with this

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

2 use find to search for the terms (ctrl f) "transformsEnabled" you will find " transformsEnabled:!0" replace it with this

" transformsEnabled:!1"

3 change the style css as mentioned in the previous answers.

回答3:

first: you must selet isotop tag then isOriginLeft: false

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

回答4:

just change 3 lines of isotope package at method Item.prototype.getPosition

1. line 1639 from "left to right" to "right to left"
2. line 1663 from "left to right" to "right to left"
3. line 1664 from "right to left" to "left to right"

if didn't find it at the same lines just search about Item.prototype.getPosition that's it and it will work

回答5:

in jquery.isotop.min.js file just replace:

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

with:

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

And:

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

with:

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