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

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 那样作为 isotope 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);
 });
 });