Упаковка, инициированная html. Как реализовать imagesLoaded?

Question

Я создаю веб-сайт с упаковкой, и я пытаюсь исправить некоторые проблемы макета с помощью imagesLoaded. Я начала packery через HTML, как это:

<div id="content" class="site-content inner js-packery" 
    data-packery-options='{ "itemSelector": ".item", "gutter": 0}'> 

И я пытаюсь использовать imagesLoaded как это:

<script> 
$(function(){ 
    var $container = $('#container'); 
    $container.imagesLoaded(function() { 
     $container.masonry(); 
    }); 
}); 
</script> 

Но оно не работает, и я понятия не имею, что делать :(

Answer 1

решение поместить скрипт в нижней части страницы, непосредственно над закрывающим тегом тела Как это:.

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

</html> 

Answer 2

var $container = $('#container'); 
$container.imagesLoaded(function() { 
    $container.masonry(); 
}); 

imagesLoaded функция сама по себе от:

http://imagesloaded.desandro.com/imagesloaded.pkgd.min.js

Вы не должны гнездиться его. Надеюсь, поможет.