我正在使用一个wordpress网站,该网站使用David DeSandro的jQuery Masonry插件以及Paul Irish的Infinite Scroll插件。有一个无限滚动插件的回调选项来调用Masonry。 Masonry提供了这个功能的两个例子:
$('#secondary').masonry({ appendedContent: $(this) });
或
$(this).masonry({ appendedContent: $( newElements ) });
但我正面临一个使用它们的奇怪问题。一切都很好,除了似乎每次下一个帖子被提取时,在第一个帖子前面有很多空的空间。对我来说,这个空间似乎与页面“1”的高度相同。 这是代码:
var $wall = jQuery('#secondary');
$wall.masonry({ singleMode: true,
itemSelector: '.box:visible'
});
我为Infinte Scroll的回调选项尝试了不同的功能:
$('#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>
答案 0 :(得分:0)
我遇到了完全相同的问题。切换到Isotope(需要廉价许可的Masonry的高级版本)为我修复了它。你可以在这里抓住它:http://metafizzy.co/
您可以通过查看当前的问题来解决问题,例如:https://github.com/desandro/masonry/issues#issue/44