无法使用JQuery初始化砌体 [英] Cannot initialize Masonry with JQuery

问题描述

根据官方文档，有不同的方法来初始化砌体容器. HTML初始化工作正常，但是当我尝试将参数从data-masonry属性移动到JQuery时，事情就中断了.

According to the official documentation there are different ways to initialize the masonry container. The HTML initialization works fine, but when I try to move the parameters from the data-masonry attribute to JQuery, things break.

这是带有JSON参数的HTML初始化.

Here is the HTML initialization with the JSON params.

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

然后是将它们移到js/JQuery文件中时的当前样子:

And then this is what it currently looks like when I move these to my js/JQuery-file:

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

使用后一版本，grid-sizer元素变为可见，当然不应显示.

Using the latter version, the grid-sizer element goes visible, which should not show up, of course.

我在官方文档中没有看到有关何时需要在JQuery中调用初始化代码的规范.是$(document).ready可以用来打电话的地方吗?

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?

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

JSFIDDLE with broken layout: http://jsfiddle.net/1f1kwfbd/10/

推荐答案

我在官方文档中没有关于何时需要的规范 调用JQuery中的初始化代码.是$(document).ready 在哪里可以打电话给我?

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?

因此您可以随时调用此名称.

So you can call this whenever you want.

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

The quickest way would indeed be on document.ready - this would fire it as soon as the page loads e.g

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

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

Alternatively you could encapsulate your masonry code within a function and choose to call this at a later time. e.g

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

要调用该函数，只需像这样调用它:

To call the function just call it like so:

initMasonry();

更新

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

After reading the docs for masonry, you need to create a new masonry object as opposed to init the masonry object on your jQuery selector.

示例代码:

$(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初始化砌体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！