无法使用 JQuery 初始化 Masonry

Question

根据 official documentation，有不同的方法来初始化砖石容器。 HTML 初始化工作正常，但是当我尝试将参数从 data-masonry 属性移动到 JQuery 时，事情就坏了。

这是使用 JSON 参数进行的 HTML 初始化。

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

然后这就是我将这些移动到我的 js/JQuery-file 时的当前样子：

var $container = $('#container');
// initialize
$container.masonry({
  columnWidth: '.grid-sizer',
  itemSelector: '.item',
  isFitWidth: true
});

使用后一个版本，grid-sizer 元素可见，当然不应该显示。

我在官方文档中没有看到关于何时需要调用 JQuery 中的初始化代码的说明。它是 $(document).ready 我可以在哪里调用它吗？

布局损坏的 JSFIDDLE：http://jsfiddle.net/1f1kwfbd/10/

Answer 1

I see no specification in the official documentation about when I need to call the initialization code in JQuery. Is it $(document).ready where I can call this?

所以你可以随时调用它。

最快的方法确实是 document.ready - 这会在页面加载后立即触发它，例如

$( document ).ready(function() {
    var $container = $('#container');
    // initialize
    $container.masonry({
      columnWidth: '.grid-sizer',
      itemSelector: '.item',
      isFitWidth: true
    });
});

或者，您可以将砌体代码封装在一个函数中，并选择稍后调用它。例如

// Declare your function
function initMasonry() {
    var $container = $('#container');
    // initialize
    $container.masonry({
      columnWidth: '.grid-sizer',
      itemSelector: '.item',
      isFitWidth: true
    });
}

要调用该函数，只需这样调用即可：

initMasonry();

更新

阅读砌体文档后，您需要创建一个新的砌体对象，而不是在 jQuery 选择器上初始化砌体对象。

示例代码：

$(document).ready(function() {

    var container = document.querySelector('#container');
    var msnry = new Masonry( container, {
        columnWidth: '.grid-sizer',
        itemSelector: '.item',
        isFitWidth: true
    });

});

已更新 fiddle：http://jsfiddle.net/pjbq4gj6/

参考文档：http://masonry.desandro.com/#javascript

无法使用 JQuery 初始化 Masonry

Cannot initialize Masonry with JQuery

jquery

jquery-masonry

masonry