javascript - Masonry:columnWidth 属性的用途是什么？

Question

当我们定义 masonry 布局时，我们需要在 javascript 中指定 columnWidth 属性，如下所示:

$maincontent.masonry({
    columnWidth: 200,
    itemSelector: '.hentry',
    isFitWidth: true,
    isAnimated: true
});

然后在 CSS 中，我们定义了列的宽度。所以假设我的 masonry 柱的 css，我有一个这样的宽度定义:

#main article {
    margin: 0 20px 35px;
    width: 360px; /* Here I can give a width different than what I specified in javascript above */
    float: left;
}

masonry 布局仍然有效，并使用我在 css 中指定的宽度。所以我不明白，在javascript中指定宽度的目的是什么？

Answer 1

所有选项都是可选的，但推荐使用 columnWidth 和 itemSelector。如果未设置 columnWidth，Masonry 将使用第一个元素的外部宽度。

您甚至可以使用 data-masonry-options 在 div 标签内定义它们:

<div id="container" class="js-masonry"
  data-masonry-options='{ "columnWidth": 200, "itemSelector": ".item" }'>

尝试使用 data-masonry-options 更改 columnWidth 而不是您的 Jquery 代码，您会注意到这里的区别是 <强> LIVE DEMO

或者更正您的 Jquery 代码，它必须像这样:

$('#maincontent').masonry({   // <---- instead of $maincontent.masonry
    columnWidth: 200,
    itemSelector: '.hentry',
    isFitWidth: true,
    isAnimated: true
});

如果 maincontent 是一个类，则使用此选择器代替 $('.maincontent')