由 html 发起的 Packery。我如何实现 imagesLoaded？答案

【问题标题】：Packery inititated by html. How do i implement imagesLoaded?由 html 发起的 Packery。我如何实现 imagesLoaded？
【发布时间】：2015-02-26 18:12:22
【问题描述】：

我正在使用 packery 创建一个网站，并且我正在尝试使用 imagesLoaded 修复一些布局问题。我通过这样的html启动packery：

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

但它不起作用，我不知道该怎么办:(

【问题讨论】：

标签： java jquery html packery imagesloaded

【解决方案1】：

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

imagesLoaded 本身就是一个函数，来自：

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

您不必嵌套它。希望对您有所帮助。

【讨论】：

【解决方案2】：

解决方案是将脚本放在页面底部，就在结束正文标记的上方。像这样：

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

【讨论】：