イメージはレール上の石積みと重なっています

Question

私はレール上のギャラリーに石工を使用しようとしています。今

$(document).ready(function(){ 
    var $grid = $('#grid').masonry({ 
    itemSelector: '.grid-item', 
    columnWidth: 200 
}); 

    $grid.imagesLoaded().progress(function() { 
    $grid.masonry('layout'); 
}); 


}); 

：これは私のjavascriptのファイル

.grid-item { 
width: 120px; 
} 

です

：これは私のhome.scssファイルの私のCSSは

---

<div id = "grid" class = "transitions-enabled"> 
<div class="grid-item"><%= image_tag"https://36.media.tumblr.com/tumblr_m9aqegpJ4j1rzugjbo1_r1_500.png" %></div> 

<div class="grid-item"><%= image_tag "http://41.media.tumblr.com/tumblr_m5wb2lom6X1rz6b7fo1_500.jpg" %></div> 

<div class="grid-item"><%= image_tag "https://41.media.tumblr.com/tumblr_m9as7bOSXt1rzugjbo1_500.png" %></div> 

<div class="grid-item"><%= image_tag "http://36.media.tumblr.com/886f9d69a50a45330bd5c6c958eeed72/tumblr_ngnn3tUjJs1tpjk9no1_400.png"%></div> 

<div class="grid-item"><%= image_tag "https://s-media-cache-ak0.pinimg.com/736x/fc/f7/f4/fcf7f4416b58634117766e5e705d1ef6.jpg" %></div> 

<div class="grid-item"><%= image_tag "http://fanaru.com/spongebob-squarepants/image/8392-spongebob-squarepants-tea-at-the-treedome-episode-screencap-1x3.jpg" %></div> 

<div class="grid-item"><%= image_tag "http://www.barnorama.com/wp-content/images/2013/01/Times-Spongebob-Made-Absolutely/01-Times-Spongebob-Made-Absolutely.jpg" %> 
</div> 
</div> 

です：今、これは私のhtmlです私の画像は重なっています。どうやって重複しないようにするの？

Answer 1

それぞれの画像の位置をサイズで設定することで、魔法が魔法を行うからです。しかし、画像がロードされる前に、サイズが何であるかを知らないので、imgタグのサイズを使用するだけです。

imagesLoaded関数を使用し、コールバックでmasonryを呼び出す必要があります。これは、画像がロードされた後に位置を計算するようにメーソンリーに指示します。あなたのケースでは

、この

$(document).ready(function(){ 
    var $gridItem = $('.grid-item'); 
    $gridItem.hide(); // this will hide the images until they are loaded 
    var $grid = $('#grid').imageLoaded(function() { 
    $gridItem.fadeIn(); // you don't need this if you didn't hide them in the first place. 
    $grid.masonry({ 
     ... // your properties here 
    }); 
    }); 

を試してみてください