Reload Masonry After Ajax Event Completes

Hi there – I’m trying reload the Masonry JS layout after an Ajax event, but can’t figure out how to do this. The Ajax event is when the Search And Filter Plugin completes its Ajax call. My masonry code is as suggested in another thread:

  document.addEventListener("DOMContentLoaded", function() {
        var masonryContainer = document.querySelector('.masonry-container');
        var gridItems = masonryContainer.querySelectorAll('.gb-query-loop-item');

        var masonry = new Masonry(masonryContainer, {
            itemSelector: '.gb-query-loop-item',
            columnWidth: '.gb-query-loop-item',
            percentPosition: true
        });

        // Relayout Masonry when images load
        imagesLoaded(masonryContainer).on('progress', function() {
            masonry.layout();
        });
				
    });

This code works great when the page reloads, but does not work after the Ajax call completes.

So I then need to add the couple lines of code to execute Masonry again after the Ajax event completes. The suggested code for this is something like this:

<script>
  $(function(){
    $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
      console.log("ajax finish");
//Masonry code here, but not sure exactly how to do this
    });
  }(jQuery));
</script>

But I’m not understanding what code to insert into this function to get Masonry to reload and how to combine this with the current Masonry snipped code. Any ideas would be greatly appreciated. Thanks 🙂