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使用的是同位素v2，但你的js和CSS是同位素v1.5。您需要imagesLoaded以防止重叠，但它不包含在同位素v2的一部分中，因为它在v1.5中。您需要单独加载它。 getMoreImages（）函数是您在网站上实际使用的加载新图像的功能吗？此外，不再有＆＃34; animationOptions＆＃34;在同位素v2中：

此

 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);
 });
 });

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

1 个答案: