I use ajax load more plugin with Masonry layout

i folow this method
https://connekthq.com/plugins/ajax-load-more/examples/masonry/preloaded-masonry/

so i creat new js file with this content :

$(function() {
   var masonryPreloadedInit = true;
   // On page load, initiate Masonry
   if($('#masonry-grid-preloaded').length){     
      var $containerPreloaded = $('#masonry-grid-preloaded .ajax-load-more-wrap');      
      $containerPreloaded.masonry({
         itemSelector: '.full-image'
         });    
      masonryPreloadedInit = false;
   }

   // almComplete
   $.fn.almComplete = function(alm){
      if($('#masonry-grid-preloaded').length){
         var $containerPreloaded = $('#masonry-grid-preloaded .ajax-load-more-wrap');
         if(!masonryPreloadedInit){
            $containerPreloaded.masonry('reloadItems');
            $containerPreloaded.imagesLoaded( function() {
               $containerPreloaded.masonry();
            });
         }
      }
   };
})(jQuery);

the content of my index file is :

<?php get_header(); ?>

 <div class="container" >

<div class="row">
<div class="col-sm-12">
<h1>Masonry</h1>
<div class="portfolio" id="masonry-grid-preloaded">


<?php echo do_shortcode(' [ajax_load_more preloaded="true" preloaded_amount="6"  post_type="post" posts_per_page="6" button_label="Load More" pause="true" pause_override="true"  container_type="ul" css_classes="grid" ] ') ?>
    </div>
</div>
</div>
</div>

<?php get_footer(); ?>
<script type="text/javascript">
var y = document.getElementsByClassName('grid');
var grid = y[0];
new AnimOnScroll(grid);
</script>

i don’t know how can i use this function AnimOnScroll with the first js file

this is the result ( click to load more ) :

Demo

Thanks for your help.

Read more here: How can i use the function AnimOnScroll in Masonry With Ajax load more plugin


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.


Wordpress related questions and answers: