jQuery Masonry无限的滚动和图片重叠问题，我的tumblr主题

Question

我是编程新手（javascript），但为了让我的tumblr主题正常工作，我在过去几天做了相当多的研究。我知道我的问题很常见，但因为我似乎没有足够的知识来正确整合许多类似示例中给出的代码部分。

My theme应该重写tumblr的“每页15个帖子”限制和“无限滚动”选项，它应该将我所有的帖子（所有图片）放在一个无尽的页面中。那么，它不会。从here的一点点帮助，我设法包裹我的{块：帖子}与随着石工（）调用随机变化几个我结束了this

正如你可以看到我的照片不重叠（最后！），但在15个第一篇文章后，它看起来像一个新的页面被创建，最后的图片没有正确对齐。

我的jQuery砌体的代码是这样的：

<script type="text/javascript"> 

$(window).load(function() { 
$('.autopagerize_page_element').masonry(), 
$('.autopagerize_page_element').infinitescroll({ 
navSelector : "div.navigation", 
// selector for the paged navigation (it will be hidden) 
nextSelector : "div.navigation a#nextPage", 
// selector for the NEXT link (to page 2) 
itemSelector : ".autopagerize_page_element", 
// selector for all items you'll retrieve 
bufferPx : 10000, 
extraScrollPx: 12000, 
loadingImg : "http://b.imagehost.org/0548/Untitled-2.png", 
loadingText : "<em></em>", 
}, 
// call masonry as a callback. 
function() { $('.autopagerize_page_element').masonry({ appendedContent: $(this) }); } 
); 
}); 
</script> 

我知道，它的一塌糊涂...... 会很感激一些帮助。

Answer 1

我不习惯与tumblr工作，但我发生了什么：

Line 110:

此脚本创建因为周围的条目每次通话时间以砖混包装DIV，脚本，每个负载看起来像一个新的页面，我认为你可以简单地删除它。

一些提示： 你不必等待$（窗口）.load执行砌筑，由$改变它（函数（）

为了避免图像重叠使用appened砌筑方法和imagesLoad：Refer this

我看你用砖石1.0.1，请确保您正在使用砖石最后一个版本（2.1.06）

示例代码：

$(function() { 
    //$('.autopagerize_page_element').masonry(); 
    var $container = $('.autopagerize_page_element'); 
    //wait until images are loaded 
    $container.imagesLoaded(function(){ 
     $container.masonry({itemSelector: '.entry'}); 
    }); 
$('.autopagerize_page_element').infinitescroll({ 
navSelector : "div.navigation", 
// selector for the paged navigation (it will be hidden) 
nextSelector : "div.navigation a#nextPage", 
// selector for the NEXT link (to page 2) 
itemSelector : ".entry", 
// selector for all items you'll retrieve 
bufferPx : 10000, 
extraScrollPx: 12000, 
loadingImg : "http://b.imagehost.org/0548/Untitled-2.png", 
loadingText : "<em></em>", 
}, 
// call masonry as a callback. 
//function() { $('.autopagerize_page_element').masonry({ appendedContent: $(this) }); } 
     function(newElements) { 
     // hide new items while they are loading 
     var $newElems = $(newElements).css({ opacity: 0 }); 
     // ensure that images load before adding to masonry layout 
     $newElems.imagesLoaded(function(){ 
      // show elems now they're ready 
      $newElems.animate({ opacity: 1 }); 
      $container.masonry('appended', $newElems, true); 
     }); 
    } 
); 
}); 

，并一定要删除最后一个脚本在这头块：

<script type="text/javascript" src="http://static.tumblr.com/imovwvl/dJWl20ley/jqueryformasonry.js"></script> 
    <script type="text/javascript" src="jquery.masonry.min.js"></script> <!-- last masonry version --> 
    <script src="http://static.tumblr.com/df28qmy/SHUlh3i7s/jquery.infinitescroll.js"></script> 
<!--<script src="http://static.tumblr.com/thpaaos/lLwkowcqm/jquery.masonry.js"></script>--> 

希望它可以帮助