2

我正在用 php 编写一个 wordpress 插件。在那个插件中，我输出带有一点文字的图片，并希望用砖石来做到这一点。

当我在 HTML 中初始化砌体时，它似乎可以工作，但图片重叠：

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

因此我正在尝试使用“Imagesloaded”（由同一开发人员？）。

但正如我所见，在我可以使用 ImagesLoaded 之前，我需要让 Masonry 启动并使用 javascript 运行。当我在我的 plugin_scripts.js 中初始化 Masonry 时，我在前端收到一个错误：

plugin_scripts.js：

jQuery(function() {

alert("hallo");
var container = document.querySelector('#container');
var msnry = new Masonry( container, {
  // options
  columnWidth: 200,
  itemSelector: '.item'
});

});

前端控制台错误：

Bad masonry element: null 
masonry.min.js?ver=3.1.2:1
q masonry.min.js?ver=3.1.2:1
d masonry.min.js?ver=3.1.2:1
(anonymous function) schnoogle_scripts_frontend.js?ver=3.9.2:10
j jquery.js?ver=1.11.0:2
k.fireWith jquery.js?ver=1.11.0:2
n.extend.ready jquery.js?ver=1.11.0:2
K jquery.js?ver=1.11.0:2

你能帮我吗？

4

3 回答 3

2

看起来 Masonry 出于某种原因找不到您的容器。我假设您已经尝试了显而易见的方法，例如确保#container实际上在页面上。

如果你正在使用 jQuery（你是），你可以使用 jQuery 的选择器引擎。

var $container = $('#container');
// initialize
$container.masonry({
  columnWidth: 200,
  itemSelector: '.item'
});

确保这是在document.ready调用中，以便您在页面的其余部分准备好之后执行此操作。

于 2014-09-12T08:42:42.593 回答
2 
window.onload = function(){
  //call masonry
}

您应该在调用 masonry 之前加载 html，以便查询选择器可以找到查询

于 2020-02-15T13:25:50.593 回答
0

如果在 WordPress 中使用 vanilla js，如果您将脚本排入队列，它无处不在。为了解决这个问题，我查询该元素是否在用于初始化 Masonry 的页面上。

var masonry_element = document.querySelector( '.masonry' );
if( typeof( masonry_element ) != 'undefined' && masonry_element != null ){
    var msnry = new Masonry( '.masonry', { ... } );
}
于 2021-06-30T17:38:21.877 回答