在WP中使用Masonry叠加图像

Question

我正在使用Masonry和WordPress制作一个评估图像的小项目......

我遇到的问题是Mansonry，其他图像之间的图像重叠。

http://postimg.org/image/kmvnzi7sh/

这是解决方案，但我不明白如何解决它。 - ＆GT; http://masonry.desandro.com/#imagesloaded

在标题中我有这个：

    <script src="http://code.jquery.com/jquery-2.1.1.min.js"> </script>

在页脚中我有这个：

        <script type="text/javascript">
var container = document.querySelector('.span12');
var msnry = new Masonry( container, {
  // options
  itemSelector: '.item-grid'
});
</script>

我不知道该怎么做： masonry.desandro.com/appendix.html#imagesloaded

BTW：我知道WP有几个插件可以达到我想要的效果，但我不喜欢使用插件..

我希望有人可以帮我解决这个问题！

谢谢！

Answer 1

您只需要包含imagesLoaded脚本并在imagesLoaded回调中初始化Masonry，如下所示：

var container = document.querySelector('.span12'),
    msnry;

imagesLoaded( container, function() {
    msnry = new Masonry( container, {
      // options
      itemSelector: '.item-grid'
    });
});