在浏览器上调整DOM的大小而不刷新页面

Question

我正在构建一个基于引导程序的wordpress主题，并在较小的屏幕尺寸上操纵布局的DOM，我正在使用此脚本在大尺寸行项目之间添加新行和hr元素：

//insert-row
var $mainElem = $('.latest-posts'),
  $parent = $mainElem.parent(),
  $nav=$('.before-navigation')

if ($(window).width() < 768){     
  var $items = $mainElem.children(':gt(0)').detach()
  if ($items.length) {
    for (var i = 0; i < $items.length; i = i + 1) {
      var $row = $('<div class="row latest-posts">').append($items.slice(i, i + 1));
      $nav.before('<hr class="small-article-divider">').before($row);

    }
  }
}else if ($(window).width() >= 768 && $(window).width() <= 970){     
  var $items = $mainElem.children(':gt(1)').detach()
  if ($items.length) {
    for (var i = 0; i < $items.length; i = i + 2) {
      var $row = $('<div class="row latest-posts">').append($items.slice(i, i + 2));
      $nav.before('<hr class="small-article-divider">').before($row);

    }
  }
}else if($(window).width() > 970){
  var $items = $mainElem.children(':gt(3)').detach()
  if ($items.length) {
    for (var i = 0; i < $items.length; i = i + 4) {
      var $row = $('<div class="row latest-posts">').append($items.slice(i, i + 4));
      $nav.before('<hr class="small-article-divider">').before($row);

    }
  }
}

但是，这仅在刷新页面后有效。 当调整浏览器窗口的大小而又不刷新页面时，该如何工作？

这是我在模板中使用的查询：

<?php get_header(); ?>
<main class="container section">
  <div class="row latest-posts">      
    <?php 
      //latest posts
      $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
      $ID = get_query_var('cat');
      $args= array(
        'cat' => $ID,
        'paged' => $paged   
      );
      $custom_query = new WP_Query($args); 
    ?>
    <?php if ($custom_query->have_posts()) : while ($custom_query->have_posts()) : $custom_query->the_post(); ?>            
    <article class="col-sm-6 col-md-3  small-article" role="article">
      <p class="article-date"><?php include (TEMPLATEPATH . '/inc/meta.php' ); ?></p>
      <?php if ( has_post_thumbnail() ) : ?>
        <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
        <?php the_post_thumbnail('thumbnail', array( 'class'    => "img-responsive attachment-post-thumbnail")); ?>
        </a>
      <?php endif; ?>
      <h2 class="article-title"><?php the_title(); ?></h2>
      <?php $limit = 40; ?>
      <p class="article-short-text"><?php echo wpse_custom_excerpts($limit); ?></p>
      <a href="<?php the_permalink(); ?>" class="btn btn-learn-more">Learn more</a>
    </article>
    <?php 
      endwhile; endif; 
      wp_reset_query(); 
    ?>
  </div>
  <hr class="small-article-divider before-navigation">
  <div class="row">
    <div class="col-sm-12">
      <?php include (TEMPLATEPATH . '/inc/nav.php' ); ?>
    </div>
  </div>
</main>

<?php get_footer(); ?>

Answer 1

如之前的回答 ，请看一下jQuery .resize（）事件 。