2

如何在漂亮的jQuery Isotope（GitHub 上的源代码）中覆盖自动左对齐？

谢谢！

4

5 回答 5

3

您有两个选择：重新设计 Isotope 的布局逻辑，或构建自己的布局模式。

Isotope 的布局逻辑逐渐增强，以在可用时使用 CSS 转换，但回退到顶部/左侧定位。因此，如果您将坐标 x, y 传递给getPositionStyles方法，它将返回{ translate: [ x, y ] }或{ left: x; top: y }。从右到左布局的问题在于它可以与{ right: x; top: y }.

建立自己的布局模式可能是更容易获得的途径。最终，我需要编写有关如何开发自己的自定义布局模式的文档。但是您可以通过阅读源代码自己完成。您会发现每种布局模式都分为 4 个必需的方法_layoutnameReset，_layoutnameLayout _layoutnameGetContainerSize并且_layoutnameResize.

我在 GitHub 上打开了一个问题，因此您可以跟踪此功能请求的状态。

于 2011-02-21T14:16:16.030 回答
1

有时商业主题（在我的情况下是 wordpress 主题）包括 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 使用 find 搜索术语 (ctrl f) "transformsEnabled" 你会发现 "transformsEnabled:!0" 用这个替换它

“变形启用：！1”

3 更改前面答案中提到的样式 css。

于 2013-12-20T11:58:19.580 回答
1

首先：您必须先选择同位素标记，然后再选择 isOriginLeft: false

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

于 2016-04-20T13:17:22.563 回答
0

只需在方法中更改 3 行同位素包Item.prototype.getPosition

  1. 第 1639 行从“从左到右”到“从右到左”
  2. 第 1663 行从“从左到右”到“从右到左”
  3. 第 1664 行从“从右到左”到“从左到右”

如果没有在同一行找到它，只需搜索Item.prototype.getPosition 就是它，它会起作用

于 2015-05-08T17:09:53.133 回答
0

在 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)
于 2015-08-03T15:38:44.497 回答