不良砌体元素:空-使用wordpress
不良砌体元素:空-使用wordpress
提问于 2014-09-12 08:20:56
我正在用php编写wordpress插件。在那个插件中，我用一个小文本输出图片，并希望用砖石来实现。
当我用HTML初始化砌体时，它似乎工作，但是图片重叠：
<div id="container" class="js-masonry" data-masonry-options='{ "columnWidth": 200, "itemSelector": ".item" }'>因此，我试图使用“图像加载”(由同一个开发人员？)。
但在我看来，在使用ImagesLoaded之前，我需要使用javascript来启动并运行。当我在我的plugin_scripts.js中初始化砌体时，会在前面得到一个错误：
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你能帮上忙吗？
回答 3
Stack Overflow用户
回答已采纳
发布于 2014-09-12 08:42:42
看起来砖石因为某种原因找不到你的容器。我想您已经尝试过显而易见的方法，例如确保#container确实在页面上。
如果您使用的是jQuery (您是这样的)，则可以使用jQuery的选择器引擎。
var $container = $('#container');
// initialize
$container.masonry({
columnWidth: 200,
itemSelector: '.item'
});确保这是在一个document.ready调用中，以便在页面的其余部分准备好之后再进行。
Stack Overflow用户
发布于 2020-02-15 13:25:50
window.onload = function(){
//call masonry
}您应该在调用砖石结构之前加载html，以便查询选择器可以找到查询。
Stack Overflow用户
发布于 2021-06-30 17:38:21
如果在WordPress中使用vanilla，那么如果您在一个脚本中排队，它就无处不在。为了解决这个问题，我查询元素是否在页面上，用于初始化砖石结构。
var masonry_element = document.querySelector( '.masonry' );
if( typeof( masonry_element ) != 'undefined' && masonry_element != null ){
var msnry = new Masonry( '.masonry', { ... } );
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/25803814
复制相关文章
相似问题
腾讯云开发者
