如何製作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的文檔，它會說：

要使用這些mods，請複製在演示頁面源中找到的修改過的方法。

這裏是展示你提到的修改的佈局模式的兩個小提琴：

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

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

你會發現，即使是在同位素的網站，兩者不顯示相互結合工作。這是因爲兩者具有互斥的_masonryReset,_masronyResizeChanged和._masonryGetContainerSize函數。這兩個人可以一起工作並不是不可能，但他們現在還沒有寫出來。

你還問：

順便說一句，我怎樣才能使項目出現，並在瞬間位置（如官方網站顯示），而不是被「slideToggled」？

最初的動畫是由您命名容器「同位素」引起的，這意味着它首次獲得動畫效果。如果您將其命名爲容器（如容器（如在Isotope的演示頁面上）），則它將不會獲得isotope類，直到它第一次佈置爲止，這會阻止初始動畫。