Wordpress中使用jQuery同位素的手动AJAX触发器

Question

我正在使用jQuery Isotope和Wordpress，到目前为止一切都运行得很好。我现在正在尝试添加一个“加载更多的帖子”按钮，当点击时，将获取下一页的帖子，并将它们附加到同位素容器。它目前的工作方式是只需加载http://localhost/page/2，它确实显示了正确的帖子。

基本上，它应该像这个插件http://www.problogdesign.com/wordpress/load-next-wordpress-posts-with-ajax/一样工作，除了它应该将它们附加到同位素容器中。

我一直在寻找一个解决方案，并尝试编辑上面的插件，但没有任何乐趣。我设法让上面的插件工作，但没有同位素功能，组合它们的同位素导致问题‘附加’他们，没有扩展容器或动画他们像其他帖子。我基本上需要无限滚动，这是手动激活点击一个链接。任何帮助都是最好的。

Answer 1

假设您已经触发了ajax请求并从中获得了结果，该结果被附加到(isotope的)容器中，您将需要调用reloadItems方法，然后再次调用isotope方法来布局所有项。

$.post(url, data, function(response) {
    $container.append(response);
    $container.isotope('reloadItems');
    $container.isotope();
});

我假设您使用的是最新版本的isotope，即版本2。

参考：reloadItems方法文档：http://isotope.metafizzy.co/methods.html#reloaditems

Answer 2

使用ajaxComplete事件的触发器对我很有帮助：

$(document).ajaxComplete(function(){
  // ...
  $container.isotope('reloadItems');
  $container.isotope({filter: filters});
  // ...
});

注意:请注意，我们应该在重新加载后使用与以前相同的参数调用同位素()方法。