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

将砌体与图像一起使用需要使用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/

JS Masonary不工作

2 个答案: