изображения, перекрывающиеся каменной кладкой на рельсах

Question

Я стараюсь использовать кладовую для галереи на рельсах. сейчас это мой HTML:

---

<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> 

это мой CSS в моем файле home.scss:

.grid-item { 
width: 120px; 
} 

это мой Javascript Файл:

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

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


}); 

прямо сейчас мои изображения перекрываются. как я могу заставить их не перекрываться?

Answer 1

Это потому, что кладка делает магию, устанавливая положение каждого изображения по их размерам. Но перед загрузкой изображений он не знает, что такое размеры, поэтому он просто использует размер тега img.

Вам необходимо использовать функцию imagesLoaded и вызвать кладку в обратном вызове, которая будет определять кладку для вычисления позиции после загрузки изображений.

В вашем случае, попробуйте этот

$(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 
    }); 
    });