通过ajax加载更多帖子后砌体视图不起作用

Question

我正在使用this 方法通过 Ajax 加载更多帖子。

我还在使用Masonry 来进行帖子布局。

砌体适用于第一组帖子，但不适用于单击加载更多帖子后附加的下一组帖子。

加载更多帖子后如何让 Masonry 工作？

点击前的画面

点击后的画面

源代码：

index.php

<!-- Post Layout -->
<div class="posts <?php echo $home_style; ?>">

    <!-- Normal Post -->
    <?php

    if (have_posts()) :

        /* Start the Loop */
        while (have_posts()) : the_post();

            /* Home Layout */
            if ($home_style === 'standard') {
                get_template_part('inc/posts/content');
            } else {
                get_template_part('inc/posts/content', 'grid');
            }

        endwhile;

    else :

        get_template_part('template-parts/content', 'none');

    endif;

    ?>

    <?php
    global $wp_query; // you can remove this line if everything works for you

    // don't display the button if there are not enough posts
    if ($wp_query->max_num_pages > 1)
        // you can use <a> as well
        echo '<div class="misha_loadmore grid-post">More posts</div>';
    ?>


</div>
<!-- Post Layout / END -->

Ajax 代码

jQuery(function ($) {
  $('.misha_loadmore').click(function () {

    var button = $(this),
      data = {
        'action': 'loadmore',
        'query': misha_loadmore_params.posts, 
        'page': misha_loadmore_params.current_page
      };

    $.ajax({
      url: misha_loadmore_params.ajaxurl, // AJAX handler
      data: data,
      type: 'POST',
      beforeSend: function (xhr) {
        // change the button text, you can also add a preloader image
        button.text('Loading...'); 
      },
      success: function (data) {
        if (data) {
          button.text('More posts').prev().before(data); // insert new posts
          misha_loadmore_params.current_page++;

          if (misha_loadmore_params.current_page == misha_loadmore_params.max_page)
            button.remove(); // if last page, remove the button

          // you can also fire the "post-load" event here 
          // if you use a plugin that requires it
          // $( document.body ).trigger( 'post-load' );
        } else {
          button.remove(); // if no data, remove the button as well
        }
      }
    });
  });
});

砌体脚本.js

/* Masonary Grid */
$('.home-grid').masonry({
  itemSelector: '.grid-post',
  percentPosition: true,
  gutter: 33
});

Answer 1

在大多数 javascript 库中，如果您在初始化插件后更改了 DOM (HTML)，您将不得不告诉库已经进行了更改。大多数库将包含一个函数或监听一个告诉它更新的事件。在 Masonry 的情况下，看起来这个函数是reloadItems。

在您的情况下，您似乎必须在执行button.text( 'More posts' ).prev().before(data); 之后直接致电$('.home-grid').masonry('reloadItems');。

完整代码：

jQuery(function ($) {
  $('.misha_loadmore').click(function () {

    var button = $(this),
      data = {
        'action': 'loadmore',
        'query': misha_loadmore_params.posts,
        'page': misha_loadmore_params.current_page
      };

    $.ajax({
      url: misha_loadmore_params.ajaxurl, // AJAX handler
      data: data,
      type: 'POST',
      beforeSend: function (xhr) {
        button.text('Loading...');
      },
      success: function (data) {
        if (data) {
          button.text('More posts').prev().before(data); // insert new posts
          $('.home-grid').masonry('reloadItems');
          misha_loadmore_params.current_page++;

          if (misha_loadmore_params.current_page == misha_loadmore_params.max_page)
            button.remove(); // if last page, remove the button

        } else {
          button.remove(); // if no data, remove the button as well
        }
      }
    });
  });
});