CODEWITHSUNDEEP
javascriptjqueryjquery-masonryinfinite-scroll
ThomasReggi
ThomasReggi

Reputation: 59355

Masonry and Infinite Scroll breaking layout when scrolling at certain speed

I have a fluid width theme and I am using jQuery Masonry and Infinite Scroll. The Problem is that if you scroll at a certain speed (not too fast and not too slow) the page it can cause a break in the grid. I have only seen this with two columns and in Firefox:

screen layout

Anyone know why this is happening? I know it could be a number of things but if anyone has had experience with this and knows what is going on it would help greatly.

UPDATE: The break happens right after the last post on the page. The ones that come after are being generated by infinite scroll's callback.

Upvotes: 4

Views: 2330

Answers (2)

Pablo
Pablo

Reputation: 11

Add this as callback for infinite scrolls and your problem will be gone... at least works for me:

// 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);
    });

});

Check the $container just in case you've changed it.

Upvotes: 0

krembo99
krembo99

Reputation: 1479

Well, I can not see the link to your page to look at (and the image is not available) but from my past experiences with masonry, whenever there is a major change in the page size (re-sizing, scrolling, re-sized divs) you need to trigger it again: 

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
        });
    });
});

Upvotes: 2

Related Questions