I use ajax load more plugin with Masonry layout

i folow this method

so i creat new js file with this content :

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

   // almComplete
   $.fn.almComplete = function(alm){
         var $containerPreloaded = $('#masonry-grid-preloaded .ajax-load-more-wrap');
            $containerPreloaded.imagesLoaded( function() {

the content of my index file is :

<?php get_header(); ?>

 <div class="container" >

<div class="row">
<div class="col-sm-12">
<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" ] ') ?>

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

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

this is the result ( click to load more ) :


Thanks for your help.

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


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: