无限滚动插件中的回调问题答案

【问题标题】：problem with callback in infinite scroll plugin无限滚动插件中的回调问题
【发布时间】：2011-01-02 17:16:48
【问题描述】：

我正在开发一个使用 David DeSandro 的 jQuery Masonry 插件和 Paul Irish 的 Infinite Scroll 插件的 wordpress 网站。 Infinite Scroll 插件有一个回调选项来调用 Masonry。 Masonry 提供了 2 个此功能的示例：

$('#secondary').masonry({ appendedContent: $(this) });

或

$(this).masonry({ appendedContent: $( newElements ) });

但是我在使用它们时遇到了一个奇怪的问题。一切正常，除了似乎每次获取下一个帖子时，第一个帖子前面都有很多空白空间。对我来说，这个空间似乎与“1”页的高度相同。这是代码：

 var $wall = jQuery('#secondary');
 $wall.masonry({ singleMode: true,
 itemSelector: '.box:visible'
  });

我为无限滚动的回调选项尝试了不同的函数：

 $('#secondary').masonry({ appendedContent: $(this) });

或

 $(this).masonry({ appendedContent: $( newElements ) });

使用第一个回调代码，我得到空白空间，使用第二个回调代码，Masonry 中断回调，第二页出现在第一个页面上。脚本给了我一个错误：newelements as “undefined element”。

我想知道 Masonry 在第二页而不是第一页对齐所有框有什么问题。在我看来，它将首页元素附加到新元素，而不是将新元素附加到当前元素。

但我找不到问题的根源。

请你帮我解决这个问题。

砌体链接：http://github.com/desandro/masonry/raw/master/jquery.masonry.js
无限滚动也在 github 上。

谢谢！

修订：完整的无限代码：

<script type="text/javascript">
 (window.INFSCR_jQ ? jQuery.noConflict() : jQuery)(function($){
 // Infinite Scroll jQuery+Wordpress plugin
 $('#secondary').infinitescroll({
 debug           : false,
 nextSelector    : "div.navigation a:first",
 loadingImg      : "/infinite-scroll/ajax-loader.gif",
 navSelector     : "div.navigation",
 contentSelector : "#secondary",
 itemSelector    : "div.box"
  },function(){ 
 Cufon.replace('li');
 Cufon.replace('h1');
 $('#secondary').masonry({ appendedContent: $(this) }); 
  });
 });   
 </script>

【问题讨论】：

你能发布你完整的无限滚动代码吗？也可以使用 firebug 来检查新页面的请求返回了什么。
感谢您的评论。我已将无限滚动代码添加到问题中。用萤火虫检查表明砌体正在工作，并且第二页的框也对齐了，但它们都与高高度对齐！在滚动到第二页之前，由 Masonry 编码的第一个框样式是 style="position: absolute; left: 0px; top: 0px;"向下滚动后，第一个框样式更改为 style="position: absolute; left: 380px; top: 2754px;".
github中完整的infineScroll代码的链接是：github.com/paulirish/infinite-scroll

标签： jquery jquery-plugins callback

【解决方案1】：

我遇到了完全相同的问题。切换到 Isotope（需要廉价许可证的 Masonry 的高级版本）为我修复了它。你可以在这里抓住它：http://metafizzy.co/

您可以通过查看当前的问题来解决它而无需升级，例如：https://github.com/desandro/masonry/issues#issue/44

【讨论】：