Question

我目前正在开发一个运动网站，我在其中使用Ajax Pagination和Infinite Scroll插件来加载更多帖子而不是分页。我使用等高来使标题的Div容器在一行上相同。均衡功能仅适用于第一组帖子，但无法在加载的帖子上工作。以下是我的代码片段：

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

当页面内容通过Ajax请求更改时，您很可能不会调用equalheight。

：在加载请求中的所有图像后，您应该在每个ajax请求上调用equalheight('.boxeq');完成。

您可以通过将ajaxComplete附加到文档对象来全局完成。

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

EqualHeight不使用Ajax加载更多

1 个答案: