在 Wordpress 中使用 jQuery Isotope 手动 AJAX 触发器答案

【问题标题】：Manual AJAX Trigger with jQuery Isotope in Wordpress在 Wordpress 中使用 jQuery Isotope 手动 AJAX 触发器
【发布时间】：2013-04-29 13:48:17
【问题描述】：

我在 Wordpress 中使用jQuery Isotope，到目前为止一切正常。我现在正在尝试在 X 个帖子之后添加一个“加载更多帖子”按钮，单击该按钮将获取下一页帖子并将它们附加到同位素容器。它目前的工作方式是加载 http://localhost/page/2 和它确实显示了正确的帖子。

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

我已经搜索并搜索了一个解决方案，并尝试编辑上述插件，但没有任何乐趣。我设法使上述插件正常工作，但没有同位素功能，将它们组合在一起同位素会导致问题“附加”它们，并且没有像其他帖子那样扩展容器或为砖石制作动画。我基本上需要通过单击链接手动激活的无限滚动。任何帮助都会很棒。

【问题讨论】：

【解决方案1】：

说，在您触发 ajax 请求并从中获取附加到容器（isotope）的结果后，您需要调用reloadItems 方法，然后再次调用isotope 方法来布局所有项目.

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

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：