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

Question

我正在尝试重现isotope's website上显示的容器居中效果。

我在容器上设置了CSS margin: 0 auto，但容器没有调整大小（因此不会让CSS width与margin: 0 auto一起使用）。

我还设置了项目之间的装订线，这也不起作用。

Here is how I do it.

顺便说一句，我怎样才能让物品出现并立即就位（如官方网站所示）而不是“slideToggled”？

Answer 1

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

  

要使用这些mod，请复制演示页面源中的修订方法。

以下是两个显示您提到的修改后的布局模式的小提琴：

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

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

你会注意到即使在Isotope的网站上，这两个也没有显示出相互结合的效果。这是因为两者具有互斥_masonryReset，_masronyResizeChanged和._masonryGetContainerSize功能。这两个人可以一起工作并非不可能，但他们还没有这么做。

您还问：

  

顺便说一句，我怎样才能让物品出现并立即就位（如官方网站所示）而不是“slideToggled”？

初始动画是由您命名容器“isotope”引起的，这意味着它第一次被动画化。如果你把它命名为不同的东西，比如容器（就像Isotope的演示页面一样），它就不会得到isotope类，直到它第一次被布局，这会阻止初始动画。