All geek questions in one place

Freemasonry and endless scrolling markup when scrolling at a certain speed

I have a fluid width theme and I use 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, this can lead to a break in the grid. I saw this with only two columns in Firefox:

screen layout

Does anyone know why this is happening? I know that this can be several things, but if someone has experience with this and knows what is happening, it will help a lot.

UPDATE: The gap occurs immediately after the last message on the page. Those that come after are generated by the infinite scroll callback.

+4
source share
2 answers

Well, I don’t see a link to your page to view (and the image is not available), but from my past experience with masonry, whenever there is a significant change in page size (redrawing, scrolling, re-sized divs), you need to call 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 }); }); });
+2
source

Add this as a callback for infinite scrolls and your problem will go away ... at least it 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 $container just in case you change it.

0
source

Source: https://habr.com/ru/post/1337396/

More articles:


All Articles