jquery - 如何制作 jQuery 同位素中心容器并设置排水沟？

Question

我正在尝试重现同位素网站上显示的容器居中效果。

我margin: 0 auto在容器上设置了 CSS，但容器没有调整大小（因此无法使用 CSS width）margin: 0 auto。

我还在项目之间设置了排水沟，但这也不起作用。

这是我的做法。

顺便说一句，我怎样才能让项目出现并立即就位（如官方网站所示）而不是“滑动切换”？

Answer 1

您的主要问题是您缺少将这些自定义方法添加到 Isotope 原型所需的自定义代码。如果您查看Modified Layout Modes的文档，它会说：

要使用这些模组，请复制在演示页面源中找到的修改后的方法。

这是两个小提琴，显示了您提到的修改后的布局模式：

居中：http: //jsfiddle.net/nate/6j5X2/

排水沟：http: //jsfiddle.net/nate/4D6N9/7/

您会注意到，即使在 Isotope 的网站上，两者也没有显示为彼此结合使用。那是因为两者具有互斥的_masonryReset,_masronyResizeChanged和._masonryGetContainerSize功能。两者可以一起工作并非不可能，但他们还没有被写成这样做。

你还问：

顺便说一句，我怎样才能让项目出现并立即就位（如官方网站所示）而不是“滑动切换”？

初始动画是由您将容器命名为“同位素”引起的，这意味着它是第一次动画。如果您将其命名为不同的名称，例如容器（如在 Isotope 的演示页面上），则isotope在第一次布局之前它不会获取该类，这会阻止初始动画。