Hi

Infinite scroll uses Ajax to load the ‘next’ posts, and so you need to do two things:

#1 Detect when our ajax has finished, for which we have a script snippet
#2 Re-run the masonry script on the posts/posts container

Your major problem will be #2 therefore. Each theme seems to implement masonry differently (assuming your theme actually uses Masonry, and not a look-a-like script like Salvattore). Some themes sensibly create a function to do this, and then run that on document ready. That makes life easier. Some simply run a long script on document ready, part of which does the actual masonry bit on the posts. That makes it very hard. You will need the help of your theme author.

I will give an example here, in this case for the Divi theme (which uses Salvattore):

<script>(function ( $ ) {
  "use strict";
  $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    console.log("ajax complete");
    var grids = document.getElementsByClassName('et_pb_blog_grid');
    salvattore['register_grid'](grids[0]);
  });
}(jQuery));</script>

In the above, the part that re-runs the Salvattore script in Divi is these two lines:

var grids = document.getElementsByClassName('et_pb_blog_grid');
salvattore['register_grid'](grids[0]);

Which is relatively easy.

In essence, it boils down to what theme you are using and if the author of it can help you with this. In the above example, Elegant Themes (the author of Divi) could not help, but as Salvattore is so easy to implement, we figured it ourselves with the help of a third party web site code snippet.

OK, I will ask the developer if I got this right.

What happens if you put a console.log('ajax finish'); in in the sf:ajaxfinish event, do you see this come up in the console?