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

【问题标题】：Isotope columnWidth and Gutter options not working同位素 columnWidth 和 Gutter 选项不起作用
【发布时间】：2017-09-26 20:30:39
【问题描述】：

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

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

没有可查看的实时网址，但您可以在此处查看，我所做的只是创建“官方”jsfiddle 的副本，然后添加列宽和装订线宽度。你可以看到，虽然盒子的宽度和高度是 70px，但它不能正常工作，除非有什么我不明白的地方..

谢谢！

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

把你的代码改成这样：

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

【讨论】：