添加圖片時重疊同位素圖片

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智慧（如不使用正確的圖像加載插件），因爲我有點新。

感謝=）

Answer 1

一個問題是，你的codepen使用同位素V2，但你的JS和CSS是同位素V1.5。 您需要imagesLoaded以防止重疊，但它不包含在同位素v2中，因爲它在v1.5中。你需要單獨加載它。 getMoreImages（）函數實際上是用於加載新圖像的網站嗎？ 也不再有 「animationOptions」 同位素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); 
}); 
});