图像与铁轨上的砖石重叠答案

【问题标题】：images overlapping with masonry on rails图像与铁轨上的砖石重叠
【发布时间】：2016-03-31 00:39:13
【问题描述】：

我正在尝试将砖石用于轨道上的画廊。现在这是我的 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');
});


});

现在我的图像重叠。如何让它们不重叠？

【问题讨论】：

标签： javascript jquery ruby-on-rails ruby masonry

【解决方案1】：

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

【讨论】：