石積みの問題 - イメージは最初に垂直に読み込み、並べ替えます。

Question

例 - http://paulmatheson.net/photography/nature.html

私の石工コード：

<script type="text/javascript"> 
var $container = jQuery('#masonry-grid'); 
$container.imagesLoaded(function() { 
    $container.masonry({ 
    columnWidth: 240, 
    gutter: 10, 
    itemSelector: '.grid-item' 
    }); 
    $container.imagesLoaded.done(function(instance) { 
    $container.masonry('layout'); 
    }); 
}); 

は私が間違ってそれを呼び出すのですか？

Answer 1

EDITED あなた$container.imagesLoaded.done機能が間違っている、それは$container.imagesLoaded().doneです。それはまたはならない$container.imagesLoaded(function()の中にあります。あなたはここにあなたの元imagesloadedコード

...再びこのレイアウト石工のように二回imagesloaded呼び出す必要はありません。

var $container = jQuery('#masonry-grid'); 
$container.imagesLoaded(function() { 
$container.masonry({ 
columnWidth: 240, 
gutter: 10, 
itemSelector: '.grid-item' 
}); 
$container.imagesLoaded.done(function(instance) { 
$container.masonry('layout'); 
}); 
}); 

ニーズをする：

var $container = jQuery('#masonry-grid'); 
$container.imagesLoaded(function() { 
$container.masonry({ 
columnWidth: 240, 
gutter: 10, 
itemSelector: '.grid-item' 
}); 

}）; 私もあなたが本当に行ってメソッドを使用する必要がある場合、あなたはこのコードを使用することができmasonry.js

前にロードimagesloaded.jsを示唆している：私は、コードを変更した

var $container = jQuery('#masonry-grid'); 
$container.imagesLoaded(function() { 
$container.masonry({ 
columnWidth: 240, 
gutter: 10, 
itemSelector: '.grid-item' 
}); 

}).done(function(instance) { 
$container.masonry('layout'); 
});