javascript - 为什么Ajax负载更多而同位素不能协同工作？

我正在尝试在我的自定义Loadmore js中使用同位素。它在没有同位素的情况下可以正常工作，但是当我在其中添加同位素时，它无法工作并且附加的内容重叠。

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没有注入我已加载的内容。因此，它不适合我的自定义加载更多代码。

最佳答案

您可以使用其API的addItems method来代替使用jQuery将元素追加到您现有的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');
});

关于javascript - 为什么Ajax负载更多而同位素不能协同工作？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57548305/