通过 ajax 加载更多帖子后，Masonry 视图无法正常工作

Question

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

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

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

砌体script.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
        }
      }
    });
  });
});

通过 ajax 加载更多帖子后，Masonry 视图无法正常工作

Masonry view not working after loading more posts via ajax

ajax

wordpress

masonry

点击前的屏幕

点击后的画面

源代码：