jquery-isotope - 同位素 columnWidth 和 Gutter 选项不起作用

Question

我只使用同位素网站提供的默认代码。该插件工作正常，它在页面上就好了。默认情况下，不指定列宽和装订线宽度，isotope 会在元素之间自动应用 7px 边距。但是，我想减少此边距并尝试按照文档的指示传递列宽和装订线宽度，但我总是失败。代码是：

$container.isotope({
     itemSelector: '.gallery-item',
     masonry : {
        columnWidth: 300, 
        gutterWidth: 2
               }
});

没有实时网址可以查看，但您可以在这里查看，我所做的只是创建“官方”jsfiddle 的副本，然后添加列宽和装订线宽度。您可以看到，虽然框的宽度和高度为 70 像素，但它无法正常工作，除非有我不明白的地方..

http://jsfiddle.net/PUhtY/

谢谢！

Answer 1

如果您仍在寻找答案，您将需要 jQuery Gutter Width Extension。

https://gist.github.com/Huskie/2574891

在你的同位素功能之外敲打它，你应该准备好了！我有同样的问题，它对我有用。

Answer 2

您的问题是您使用guuterWidth而不是gutter.

将您的代码更改为以下内容：

$container.isotope({
 itemSelector: '.gallery-item',
 masonry : {
    columnWidth: 300, 
    gutter: 2
    }
});