添加图像时重叠同位素图像

Question

我一直在努力让Isotope 工作。我有一个应用程序，单击按钮后，我通过从 JSON 获取它们的 URL 来加载更多图像。我遇到的问题是，当我将图像添加到“galleryContainer”div（我保存所有图像的 div）时，图像重叠。那或什么都没有发生，整个页面似乎冻结了。显然这是一个frequent problem，但我仍然无法让它为我的项目工作。我尝试使用“imagesLoaded”，但它似乎对我不起作用。

以下是相关代码：

// Get more images and add them to the galleryContainer
function getMoreImages() {
  for (var i = 0; i < 3; i++) {
    var newImage = $('<div class="objects"></div>');
    var x = Math.floor((Math.random() * 750) + 750);
    var y = Math.floor((Math.random() * 750) + 750);      

    newImage.append($('<img width="750" src="http://lorempixel.com/' + x + '/' + y + '">'));
    $container.append(newImage).imagesLoaded(function() {
      $container.isotope('appended', newImage);
    });
  }
}

这是一个 (JSFiddle)[http://codepen.io/dirtshell/pen/emdjGv] 演示我的问题。

我完全有可能只是在 JS 方面犯了一个简单的错误（比如没有正确使用 imagesLoaded 插件），因为我对它有点陌生。

谢谢 =)

Answer 1

一个问题是您的 codepen 使用的是 isotope v2，但您的 js 和 CSS 是 isotope v1.5。 您需要 imagesLoaded 以防止重叠，但它不像 v1.5 中那样包含在同位素 v2 中。您需要单独加载它。 getMoreImages() 函数是您在站点上实际用于加载新图像的函数吗？ 同位素 v2 中也不再有“animationOptions”：

这个

 animationOptions: {
    duration: 750,
    easing: 'linear',
    queue: false
  }

现在是这样的：

transitionDuration: '0.4s'

在 v2 中，您可以删除任何 v1.5 同位素 CSS

附录

这是给你的更新Codepen

这里是相关代码（修改后的）：

var $container = $('.galleryContainer');

// Initialize isotope on window load and image load
$(window).load(function() {
$container.isotope({
  itemSelector: '.objects',
  masonry: {
  columnWidth: 780
},
  transitionData: '0.4s'
});
});

 // Get more images and add them to the galleryContainer
 $('.loadButton').on( 'click', function() { 
 var x = Math.floor((Math.random() * 750) + 750);
 var y = Math.floor((Math.random() * 750) + 750); 
 for (var i = 0; i < 3; i++) {
 var newImage = $('<div class="objects"><img width="750" src="http://lorempixel.com/' + x + '/' + y + '"></div>');  
  }

 $container.append(newImage).imagesLoaded(function() {
  $container.isotope('appended', newImage);
 });
 });