无法使用JQuery初始化Masonry

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

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

然后，当我将它们移动到我的js / JQuery文件时，这就是它当前的样子：

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

使用后一版本，grid-sizer元素变得可见，当然不应该出现。

我在官方文档中没有看到关于何时需要在JQuery中调用初始化代码的规范。 是$（文件）.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 }); }); 

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

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