javascript - 图像与 rails 上的砖石重叠

Question

我正在尝试使用砖石 build rails 上的画廊。现在这是我的 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>

这是我的 home.scss 文件中的 css:

.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

这是因为 masonry 通过根据每个图像的大小设置其位置来发挥魔力。但在加载图像之前，它不知道尺寸是多少，因此它只使用 img 标签的尺寸。

您需要使用imagesLoaded函数，并在回调中调用masonry，这将告诉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
    });
  });