Bildausrichtung mit Isotope und imagesLoaded

Question

Ich möchte einige flickr Fotos von einem Firmenaccount laden und habe Probleme mit der Ausrichtung der Bilder.

Ich verwende Isotope, um die Bilder richtig auszurichten. Jetzt stehe ich vor dem Problem, dass sich die Bilder überschneiden, wenn meine Seite das erste Mal geladen wird. Wenn ich die Größe des Fensters ändere, funktioniert die Bilderausrichtung und alles ist in Ordnung, aber es löst nicht mein grundlegendes Problem. Um das überlappende Problem für den ersten Aufruf auf der Website zu beheben, habe ich versucht, die empfohlene imagesloaded.js zu verwenden, aber es funktioniert nicht.

Zuerst dachte ich, es ist, weil ich die Bilder über einen asynchronen Ajax-Aufruf geladen habe, also habe ich meine AJAX-Funktion auf die folgende Funktion geändert, aber ich habe immer noch das gleiche Problem.

$.getJSON("https://api.flickr.com/services/feeds/photos_public.gne?id=125591374@N02&format=json&jsoncallback=?", function (data) { 
    console.log(data); 
    $("img").each(function() { 
     $(this).attr("src", data.items[i].media.m); 
     i++; 
    }); 
}); 

Hier ist mein Isotopen-Skript

var $container = $('#picContainer'); 

$container.isotope({ 
    itemSelector: '.picContainer-item' 
    , percentPosition: true 
    , layoutMode: 'masonry' 
    , masonry: { 
     columnWidth: 50 
    } 
}); 

$container.imagesLoaded().progress(function() { 
    $container.isotope("layout"); 
}); 

Ich kann nicht das Problem finden. Weiß jemand wo ich etwas falsch gemacht habe?

ich auch bereit, eine codepen für ein besseres Verständnis :)

Codepen example

Dank!

Answer 1

Was passiert, isotope wird geladen, bevor alle Ihre Bilder sind. Es wird also nicht die richtige Breite eingestellt, bis es erneut gerendert wird (wenn Sie die Größe des Fensters ändern). Wenn Sie Ihren Isotopencode innerhalb einer $(window).load(function(){}) platzieren (die nur läuft, nachdem alle Ressourcen geladen wurden), wird es funktionieren.

$(window).load(function() { 

    var $container = $('#picContainer'); 

    $container.isotope({ 
     itemSelector: '.picContainer-item' 
     , percentPosition: true 
     , layoutMode: 'masonry' 
     , masonry: { 
     columnWidth: 50 
     } 
    }); 

}); 

CodePen