jquery - JS砌体不工作

Question

我正试图让 Masonary 在页面上工作，但到目前为止还没有运气。我试过按照教程进行操作，但即使我在 jsFiddle 中复制所有内容，它也不起作用。我在这里遗漏了什么愚蠢的东西吗？​http://jsfiddle.net/gZ77r/

<div id="container" class="js-masonry" data-masonry-options='{ "columnWidth": 200, "itemSelector": ".masonryImage" }'>
    <div class="masonryImage">
        <img src="http://topknot.ca/wp/wp-content/uploads/2013/10/kitten.jpg" alt="">
    </div>.....

`

Answer 1

将 Masonry 与图像一起使用需要使用 imagesLoaded 插件，因为如果没有加载 div 中的图像，Masonry 无法知道 div 的高度。

检查附录以获取有关此信息：http: //masonry.desandro.com/appendix.html

添加图像加载插件并尝试通过 JS 实例化砌体。

var container = document.querySelector('#container');
var msnry = new Masonry( container, {
  columnWidth: 200,
  itemSelector: '.masonryImage'
});
// layout Masonry again after all images have loaded
imagesLoaded( container, function() {
  msnry.layout();
});

Answer 2

我在示例中尝试了您的照片得出的结论是您的图像尺寸太大而无法使用masonry.js。请检查：

http://jsfiddle.net/w4WrP/