Question

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

当我在HTML中初始化砌体时，它似乎有效，但图片重叠：

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

因此我正在尝试使用＆＃34; Imagesloaded＆＃34; （由同一个开发人员？）。

但是正如我所看到的，在我使用ImagesLoaded之前，我需要使用javascript来运行Masonry。当我在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

你能帮忙吗？

Answer 1

看起来砌体由于某种原因无法找到您的容器。我假设您已经尝试过显而易见的事情，例如确保#container实际上在页面上。

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

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

确保这是在document.ready来电之内，以便您在页面的其余部分准备就绪后再进行此操作。

Answer 2

window.onload = function(){
  //call masonry
}

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

Answer 3

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

load data local infile 'D:\\highradius\\temp_data.csv' 
into table `database1`.`data` 
fields escaped by '\\' terminated by ',' 
lines terminated by '\r\n' 
(`business_code`, `cust_number`, `name_customer`, `clear_date`, `buisness_year`)

糟糕的砌体元素：null - 使用wordpress

3 个答案: