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中调用初始化代码。是$（文件）.ready 在哪里我可以称之为？

所以你可以随时打电话。

最快的方式确实是在document.ready上 - 一旦页面加载就会触发它，例如

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

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

// 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

无法使用JQuery初始化Masonry

1 个答案: