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.js。請檢查：

http://jsfiddle.net/w4WrP/

Answer 2

使用砌體與圖像需要使用imagesLoaded插件，如砌體無法知道一個div而不被裝載在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(); 
});