javascript - Wordress and packery.js integration issues but works on non wordpress site

Question

I am trying to use packery.js on my wordpress theme, but it doesn't work.

It works when i use the exact same code on a test html site. It also works in wordpress when i initiate it with the html method, but as i also needs to use "imageloaded" i have to make it work with java script.

My guess is that something in wordpress is disrupting my jQuery or something, but i don't know what i could be?

I have tried using different versions of jquery but it dosent work.

My script:

var container = document.querySelector('#content');
var $pckry;
var $pckry = new Packery( container, {
// options
itemSelector: '.item',
gutter: 0,
});
// initialize Packery after all images have loaded
imagesLoaded( container, function() {
$pckry = new Packery( container );
});

Answer 1

好的，所以我想通了。首先，它不需要 jquery 工作。问题是我将脚本放在页眉中，由于某种原因我无法解释它必须放在页脚中，就在结束正文标记的上方。

像这样：

<?php wp_footer(); ?>
<script>
var container = document.querySelector('#blog-list-center');
var $pckry;
var $pckry = new Packery( container, {
// options
itemSelector: '.item',
gutter: 0,
});
// initialize Packery after all images have loaded
imagesLoaded( container, function() {
$pckry = new Packery( container );
});
</script>
</body>