dynamische Größenänderung in Metafizzy Packery Komponente

Question

Ich freue mich auf JavaScript Packery Komponente. Ich möchte die aktuelle Implementierung von GridStack zu Packery wechseln. Eine Sache, die mich im Moment davon abhält, ist der fehlende dynamische Größenänderungs-Effekt von Komponenten (Panels) in Packery. Im Moment kann ich diese Funktion in Demo oder Dokumentation nicht finden.

Gibt es eine Möglichkeit, diese Funktion in Packery zu implementieren/aktivieren?

Answer 1

Dies kann sicherlich getan werden. Verwenden Sie die "Responsive Layouts" Set-up wie Ihr Modell: https://packery.metafizzy.co/layout.html#responsive-layouts

Critically, sollten Sie auch Metafizzy eigenen imagesLoaded js verwenden die Javascript nach die Bilder vollständig geladen werden, zu laden: https://imagesloaded.desandro.com

Der vollständige JavaScript-Aufruf (Packery innerhalb von imagesLoaded) sollte wie folgt aussehen:

<script type='text/javascript'> 
    $('.grid').imagesLoaded(function(){ 
     $('.grid').packery({ 
      itemSelector:'.grid-item', 
      percentPosition:true, // *critical for responsive layout* 
      // your own further options 
     }); 
    }); 
</script> 

Wenn Sie immer noch Probleme haben, versuchen Sie den js Aufruf Umkehren so dass imagesLoaded aufgerufen wird, nachdem jedes Bild geladen wird, wie auf der Webseite Packery empfohlen: https://packery.metafizzy.co/layout.html#imagesloaded

Viel Glück!