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

Overlapping Isotope images when adding images

本文关键字：图像 同位素 重叠 添加      更新时间：2023-09-26

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

以下是相关代码：

// 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]演示我的问题。

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

谢谢=）

一个问题是你的代码笔使用的是同位素v2，但你的js和CSS是针对同位素v1.5的。您需要 imagesLoaded 以防止重叠，但它不像 v1.5 那样包含在同位素 v2 中。您需要单独加载它。getMoreImages（） 函数是您在网站上实际用于加载新图像的吗？同位素v2中也不再有"动画选项"：

这

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

现在是这个：

transitionDuration: '0.4s'

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

补遗

这是对你的更新 代码笔

以下是相关代码（已更改）：

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);
 });
 });
相关文章：