Darstellungsfehler im Masonry-Layout bei Webkit-Browsern beheben

grid 2111449 1920
Bildquelle: Pixabay, PIRO4D

Nach dem frisch Laden eines responsive Masonry-Grids (Breite der Gridelemente in Prozenten, Höhe daher nicht definiert) mit Bildern lagen die Elemente in Opera (Webkit) der zweiten Reihe zum Teil über den Elementen der vorherigen. In der letzten Reihe wurden die Texte unter den Bildern vom Seitenfooter verschluckt. Nach Resize oder erneutem Laden der Seite trat das Problem nicht mehr auf. Es betraf auch nur Elemente mit Bildern. Die Ursache dafür war offenbar, dass die Höhe der Elemente ohne die Bilder berechnet worden war.

masonry-webkit

Folgerichtig macht es also Sinn, zuerst die Bilder zu laden, und dann Masonry auszuführen. Das Plugin dafür heißt imagesLoaded und stammt aus derselben Quelle wie das Masonry-Skript

enqueue script (WordPress)

wp_register_script('images-loaded', {my_plugin_url} . 'js/images-loaded.min.js',array('jquery'),'',true);
wp_register_script('pkgd-masonry', {my_plugin_url} . 'js/masonry.pkgd.min.js',array('images-loaded'),'',true);
wp_enqueue_script('masonry-params', {my_plugin_url} . 'js/masonry-params.js',array('pkgd-masonry'),'',true);

masonry-params alt

$('.itemlist').masonry({
    itemSelector: '.grid-item',
    percentPosition: true,
    columnWidth: '.grid-sizer',
    gutter: '.gutter-sizer'
});

masonry-params neu

$('.itemlist').imagesLoaded( function() {
    $('.itemlist').masonry({
        itemSelector: '.grid-item',
        percentPosition: true,
        columnWidth: '.grid-sizer',
        gutter: '.gutter-sizer'
    }); 
});

Anschließend trat der Darstellungsfehler in Opera nicht mehr auf.

Bitte Kommentarfunktion nicht für Supportanfragen nutzen. Dem kann hier nicht entsprochen werden. Die Angabe einer E-Mail-Adresse und eines Namens ist nicht erforderlich. Einen (Spitz)-Namen zu nennen wäre aber doch nett.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Hinweis: Sowohl angegebener Name als auch E-Mail-Adresse (beides ist optional, dafür werden alle Kommentare vor Veröffentlichung geprüft) werden dauerhaft gespeichert. Du kannst jeder Zeit die Löschung Deiner Daten oder / und Kommentare einfordern, direkt über dieses Formular (wird nicht veröffentlicht, und im Anschluss gelöscht), und ich werde das umgehend erledigen. – Mit hinterlassenen Kommentaren hinterlegte IP-Adressen werden nach zwei Monaten automatisch gelöscht

publicly queryable