javascript - 在 WP 中使用 Masonry 覆盖图像

Question

我正在使用 Masonry 和 WordPress 做一个小项目来评价图像......

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

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

这是解决方案，但我不明白如何解决它。--> 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

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

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

谢谢！

Answer 1

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

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

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