Infinite scroll masonry

Anonymous

#112106

Hi

Thanks for S&F it has been a great help for me!

I try to have an infinite scroll with a masonry grid.
But i cant find a way to trigger the masonry scrit once the new elements are loaded…

Any idea?

Trevor

#112222

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.

Anonymous

#112238

Hi thanks for the reply

I used a custom theme based on foundation (joints wp).

I tried

$( document ).on(“sf:ajaxfinish”, “.searchandfilter”, function() {
$(‘#masonry-container’).masonry({
itemSelector: ‘#masonry-container .grid-item’
});
});

But no effect…

Trevor

#112250

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

Anonymous

#112253

OK

By the way.
I load mosnory form wp core…

Ross Moderator

#112260

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?

Anonymous

#112276

Yes a do

In fact i’m allready using it with the filter to fire again my lasy loading script for image…

Ross Moderator

#112281

This reply has been marked as private.

Anonymous

#112317

This reply has been marked as private.

Anonymous

#113123

Any idea on this?

[Author]

Posts