无法使用 JQuery 初始化砌体

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 文件时，这就是它目前的样子：

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

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

所以你可以随时调用它。

最快的方法确实是在 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
    });

});

更新小提琴：http://jsfiddle.net/pjbq4gj6/

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