为什么 Ajax 加载更多而 Isotope 不能一起工作？

Question

我正在尝试在我的自定义 Loadmore js 中使用 Isotope。它在没有 Isotope 的情况下工作正常，但是当我添加 Isotope 时它不起作用并且附加内容重叠。

Ajax代码

  $load_posts_button.click(function(e) {
    e.preventDefault();

    var request_next_link =
      pagination_next_url.split(/page/)[0] +
      'page/' +
      pagination_next_page_number +
      '/';

    $.ajax({
      url: request_next_link,
      beforeSend: function() {
        $load_posts_button.text(decoding_translation_chars(pagination_loading_text));
        $load_posts_button.addClass('c-btn--loading');
      }
    }).done(function(data) {
      var posts = $('.infinite-post', data);
      $('.infinite-scroll').append(posts); 

      $load_posts_button.text(decoding_translation_chars(pagination_more_posts_text));
      $load_posts_button.removeClass('c-btn--loading');
      pagination_next_page_number++;
      // If you are on the last pagination page, hide the load more button
      if (pagination_next_page_number > pagination_available_pages_number) {
        $load_posts_button.addClass('c-btn--disabled').attr('disabled', true);
      }
    });
  });

我尝试用下面的代码激活那里的同位素，

$.ajax({
  url: request_next_link,
  beforeSend: function() {
    $load_posts_button.text(decoding_translation_chars(pagination_loading_text));
    $load_posts_button.addClass('c-btn--loading');
  }
}).done(function(data) {
  var posts = $('.infinite-post', data);    

  var $posts = $('.grid').isotope({
    // main isotope options
    itemSelector: '.grid-item',
    percentPosition: true,
    masonry: {
        columnWidth: 2,
    }
    })

  $('.infinite-scroll').append(posts);

但是它不起作用。 Isotop css 没有注入我加载的内容。所以它不适用于我的自定义加载更多代码。

Answer 1

您可以使用 API 的 addItems method，而不是使用 jQuery 将元素附加到您预先存在的 Isotope 实例。这是假设您已经在代码中的某处实例化了 Isotope 并存储了对它的引用，即：

// Assuming that you have instantiated Isotope elsewhere
var $grid = $('.grid').isotope(...);

然后你可以简单地做：

$grid.isotope('addItems', $posts); 将来自您的 AJAX 请求的所有新收到的帖子添加到您的网格中，然后
$grid.isotope('layout'); 强制重新布局

示例：

$.ajax({
  url: request_next_link,
  beforeSend: function() {
    $load_posts_button.text(decoding_translation_chars(pagination_loading_text));
    $load_posts_button.addClass('c-btn--loading');
  }
}).done(function(data) {
  var posts = $('.infinite-post', data);    

  // Add all new posts to your grid
  $grid.isotope('addItems', posts);

  // Force grid to relayout
  $grid.isotope('layout');
});

为什么 Ajax 加载更多而 Isotope 不能一起工作？

Why Ajax load more and Isotope not working together?

javascript

ajax

jquery-isotope