使用Wordpress中的jQuery Isotope手动AJAX触发器

Question

我在Wordpress中使用jQuery Isotope，到目前为止一切正常。我现在正试图在X个帖子之后添加“加载更多帖子”按钮，点击后将获取帖子的下一页并将它们附加到同位素容器。它目前的工作方式是加载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});
  // ...
});

N.B。请注意，我们应该使用与之前相同的参数重新加载后调用isotope（）方法。