Maçonnerie et infini défilement rupture mise en page lors du défilement à certaine vitesse

Question

J'ai un thème de largeur fluide et je suis en utilisant jQuery Maçonnerie et infini défilement. Le problème est que si vous faites défiler à une certaine vitesse (pas trop rapide et pas trop lent) la page, il peut provoquer une rupture dans la grille. Je n'ai vu avec deux colonnes et dans Firefox:

Quelqu'un sait pourquoi cela se passe? Je sais que ce pourrait être un certain nombre de choses, mais si quelqu'un a eu l'expérience avec cela et sait ce qui se passe, il serait très utile.

Mise à jour: La rupture se produit juste après le dernier message sur la page. Ceux qui viennent après sont générés par le rappel de défilement infini.

Answer 1

Eh bien, je ne peux pas voir le lien vers votre page à regarder (et l'image ne sont pas disponibles), mais de mes expériences passées avec la maçonnerie, chaque fois qu'il ya un changement majeur dans la taille de la page (re-dimensionnement, le défilement, redimensionnées divs), vous devez déclencher à nouveau:

jQuery(document).ready(function() {
    jQuery("#somediv").click(function() {
        jQuery('#leftcol').toggle(700); //div resizing start here
        jQuery('#somediv2').toggleClass("minside");
        jQuery('#somediv').toggleClass("full"); // evoke again after change..
        jQuery('#container').masonry({
            itemSelector : '.item',
            columnWidth : 240
        });
    });
});

Answer 2

Ajoutez ceci comme rappel pour rouleaux infinis et votre problème sera parti ... au moins fonctionne pour moi:

// trigger Masonry as a callback
function (newElements) {
    // hide new items while they are loading
    var $newElems = $(newElements).css({ opacity: 0 });
    // ensure that images load before adding to masonry layout
    $newElems.imagesLoaded(function () {
        // show elems now they're ready
        $newElems.animate({ opacity: 1 });
        $container.masonry('appended', $newElems, true);
    });

});

Vérifiez la $container juste au cas où vous l'avez modifié.