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>

这是我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

这是因为砌体通过按照尺寸设置每个图像的位置来实现魔力。但是在加载图片之前，它并不知道尺寸是多少，因此只使用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
    });
  });

图像与铁轨上的砖石重叠

1 个答案: