EqualHeight не работает с Ajax Load More

Question

В настоящее время я занимаюсь разработкой спортивного сайта, где у меня есть плагин Ajax Pagination и Infinite Scroll для загрузки большего количества сообщений вместо разбивки на страницы. Я использую equheights, чтобы контейнеры Div для заголовков были одинаковыми в строке. Функция equalheight применяется только к первому набору сообщений, но не работает с загруженными сообщениями. Ниже приведены мои фрагменты кода:

Equalheight 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); 
 

 
}

И петля

<?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(); ?> 

Я с нетерпением жду вашей помощи

Answer 1

Скорее всего, вы не звоните equalheight, когда содержимое страницы изменяется с помощью запроса Ajax. Вы должны позвонить equalheight('.boxeq'); при каждом запросе ajax Завершить после загрузки всех изображений из запроса.

Вы можете сделать это глобально, добавив ajaxComplete к объекту документа.

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