EqualHeight Not Working With Ajax Load More

Question

I am currently developing a sport website where I have Ajax Pagination and Infinite Scroll plugin to load more posts instead of paginating. I use equalheights to make the Div containers for the titles to be same on a row. The equalheight function only applies on the first set of posts, but failed to work on the loaded posts. Below are my code snippets:

Equal height JQuery

var mq = window.matchMedia( "(min-width: 768px)" );
if (mq.matches) {

;
(function ($) {
$(document).ready(function() {
    equalheight = function(container){

var currentTallest = 0,
     currentRowStart = 0,
     rowDivs = new Array(),
     $el,
     topPosition = 0;
 $(container).each(function() {

   $el = $(this);
   $($el).height('auto')
   topPostion = $el.position().top;

   if (currentRowStart != topPostion) {
     for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
       rowDivs[currentDiv].height(currentTallest);
     }
     rowDivs.length = 0; // empty the array
     currentRowStart = topPostion;
     currentTallest = $el.height();
     rowDivs.push($el);
   } else {
     rowDivs.push($el);
     currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest);
  }
   for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
     rowDivs[currentDiv].height(currentTallest);
   }
 });
}

    $(window).load(function() {
      equalheight('.boxeq');
    });

    $(window).resize(function(){
      equalheight('.boxeq');
    });


else {

    ;
    (function ($) {
    $(document).ready(function() {
    equalheight = function(container){

var currentTallest = 0,
     currentRowStart = 0,
     rowDivs = new Array(),
     $el,
     topPosition = 0;
 $(container).each(function() {

   $el = $(this);
   $($el).height('auto')
   topPostion = $el.position().top;

   if (currentRowStart != topPostion) {
     for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
       rowDivs[currentDiv].height(currentTallest);
     }
     rowDivs.length = 0; // empty the array
     currentRowStart = topPostion;
     currentTallest = $el.height();
     rowDivs.push($el);
   } else {
   for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
     rowDivs[currentDiv].height(currentTallest);
     rowDivs.push($el);
     currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest);

  }
   }
 });
}

});

    })(jQuery);

}

And the loop

<?php

$args = array(
'cat' => '4'
);

$wp_query = new WP_Query( $args );
$wp_query->query('showposts=8'.'&paged='.$paged);
while ($wp_query->have_posts()) : $wp_query->the_post();
?>

<a href="<?php the_permalink(); ?>">
<div class="col-lg-3 col-md-4 col-sm-6 onepost">
<div class="newsbox2 newsboxcolor1">
<div class="newsbox3pix boxeq">
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail( 'full', array() );
}
else { ?>
<img src="<?php echo get_bloginfo('template_directory');?>/images/noimage.jpg" alt="no image">
<?php }
?>
</div>
<div class="newstitle boxeq2">
<span class="matchtime"><?php the_time();?><br></span>
<h3><?php the_title(); ?></h3>
</div>
<span class="fa fa-comments cmnt"> <?php comments_number('0','1','%'); ?></span>
</div><!--newsbox2-->
</div>
</a>

<?php endwhile; ?>

<nav class="pagination">
 <?php post_pagination_nav(); ?>
</nav>

<?php wp_reset_query(); ?>

I look forward to your assistance

Answer 1

Most likely you are not calling equalheight when the content of the page is changing through Ajax request. You should call equalheight('.boxeq'); on every ajax request Complete after all images from the request are loaded.

You can do it globally by attaching ajaxComplete to the document object.

   $(document).ajaxComplete(function(data) {
        $('img').on('load', function() {
            equalheight('.boxeq');
        });     
   });