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

Question

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

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

没有实时网址可以查看，但你可以在这里查看，我所做的只是创建“官方”jsfiddle的副本，只需添加columnwidth和gutter width。你可以看到，当盒子的宽度和高度是70px时，它不能正常工作，除非有一些我不明白的东西..

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
    }
});