2

我目前正在开发一个体育网站，我有 Ajax 分页和无限滚动插件来加载更多帖子而不是分页。我使用 equalheights 使标题的 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(); ?>

我期待你的帮助

4

1 回答 1

1

equalheight当页面内容通过 Ajax 请求更改时，您很可能没有调用。加载请求中的所有图像后，您应该调用equalheight('.boxeq');每个 ajax 请求 Complete 。

您可以通过将 ajaxComplete 附加到文档对象来全局执行此操作。

   $(document).ajaxComplete(function(data) {
        $('img').on('load', function() {
            equalheight('.boxeq');
        });     
   });
于 2016-08-11T13:02:45.493 回答