Coding | Javascript

Darstellungsfehler im Masonry-Layout bei Webkit-Browsern beheben

grid 2111449 1920

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.

weiter schmökern

Schreibe einen Kommentar

Bitte Kommentarfunktion nicht für Supportanfragen nutzen. Dem kann hier nicht entsprochen werden.

Deine E-Mail-Adresse wird nicht veröffentlicht.