Isotope funktioniert nicht mit imagesLoaded?

Question

Ich verwende jQuery Isotope, um ein horizontales Layout zu erstellen, indem Sie DIVs mit 100% Höhe nebeneinander ausrichten und Bilder in jedem DIV vertikal zentrieren. Also für, ich rufe Isotopen wie diese und alles funktioniert in Chrome (vor Ort):

$(function(){ 
    var $container = $('#container'); 
    $container.isotope({ 
     itemSelector : '.itemwrap', 
     layoutMode: 'horizontal', 
     horizontal: { 
      verticalAlignment: 0.5 
     } 
    }); 
}); 

Da die Bilder Zeit dauern zu laden, sie neigen dazu, zu versauen das Isotopen-Layout, so dass ich versuche, mit dem imagesLoaded fix arbeiten: http://isotope.metafizzy.co/appendix.html

ich implementiert dieses Update wie folgt aus:

$(function(){ 
    var $container = $('#container'); 
    $container.imagesLoaded(function(){ 
     $container.isotope({ 
      itemSelector : '.itemwrap', 
      layoutMode: 'horizontal', 
      horizontal: { 
       verticalAlignment: 0.5 
      } 
     }); 
    }); 
}); 

mit diesem imagesLoaded, wird das Isotop haupt nicht mehr laden. Entfernen von imagesLoaded, Isotope tritt wieder ein (aber mit den verwirrten Layouts). Weiß jemand, wo der Fehler liegt?

Danke!

Answer 1

Ich kam auch zu dem gleichen Problem vor kurzem und entdeckte, dass dies auf Async-Anrufe zurückzuführen ist. Ihre $container.imagesLoaded() Funktion wird aufgerufen, bevor das geladene Bild geladen wird.

Sie müssen nur $container.imagesLoaded() in $(document).ready() wrap und entfernen asyn attr aus jquery Skriptzeile.

Answer 2

Sie können auch diese Implementierung verwenden, um stattdessen für alles das Warten zu laden, können Sie die Bilder zeigen, wie sie individuell an das Stromnetz geladen werden, würde der Code wie folgt aussehen:

jQuery(document).ready(function(){ 

    // Initialize Isotope 

    $('.grid').isotope({ 
     itemSelector: '.item', 
     percentPosition: true, 
    }); 

    // Refresh the layout of the grid each time an image gets loaded 

    $('.grid').imagesLoadedMB().progress(function() { 
     $('.grid').isotope('layout'); 
    }); 

}); 

I persönlich würde ich bevorzugen, ein Plugin zu verwenden, wie dieses verwenden: https://codecanyon.net/item/media-boxes-portfolio-responsive-grid/5683020 mit diesem Plugin können Sie sehr einfach den Abstand zwischen den Elementen, Anzahl der Spalten auf jeder Auflösung und mehr, auch kommt es mit der Fähigkeit, Filter hinzuzufügen , Sortieren und ein Suchfeld, probieren Sie es aus!