我正在研究一个tumblr主题，试图将砖石结构与无限卷轴相结合。虽然砖石工程，但只要我加上无限滚动，东西就会开始断裂。第二页内容出现在第一页内容之后，当我单击"下一页"时，它会将我带到第2页，而不是在第1页底部加载新元素。
我试着阅读了无限滚动和砖石文档，在StackOverflow上查看了类似的问题，并玩了我的HTML结构和Javascript设置，但到目前为止，我一点运气都没有。有人能看看我的代码，告诉我我是否做错了什么吗？我希望当用户单击"下一页"时，第2页中的新元素会在底部加载。
这是我的测试tumblr网址：http://masoninfinite.tumblr.com/这是我的代码的粘贴框：http://pastebin.com/KnbxNnES我也会在下面发布。我真的很感激能得到的任何帮助。
<html>
<head>
<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
{block:Description}
<meta name="description" content="{MetaDescription}" />
{/block:Description}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="http://static.tumblr.com/bpwficy/Ahjm97maz/masonry.js"></script>
<script type="text/javascript" src="http://codysherman.com/tools/infinite-scrolling/code"></script>
<script>
$(function(){
var $container = $('#container');
$container.imagesLoaded( function(){
$container.masonry({
itemSelector : '.post',
columnWidth : 300,
gutterWidth: 30,
isAnimated: true
});
});
$container.infinitescroll({
navSelector : '.navigation', // selector for the paged navigation
nextSelector : '.nav-previous a', // selector for the NEXT link (to page 2)
itemSelector : '#container .post', // selector for all items you'll retrieve
},
// call Masonry as a callback
function( newElements ) {
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>
<style>
#container { border: 1px solid blue; width: 960px; margin: 0px auto; }
.post { margin-bottom: 20px; border: 1px solid red; width: 300px; background: #ccc; }
img { width: 200px; height: 200px; }
</style>
</head>
<body>
<h1>{Title}</h1>
{block:Description}
<p id="description">{Description}</p>
{/block:Description}
<div id="container">
<div class = "autopagerize_page_element" >
<ol id="posts">
{block:Posts}
{block:Text}
<li class="post text">
{block:Title}
<h3><a href="{Permalink}">{Title}</a></h3>
{/block:Title}
{Body}
</li>
{/block:Text}
{block:Photo}
<li class="post photo">
<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</li>
{/block:Photo}
{block:Photoset}
<li class="post photoset">
{Photoset-500}
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</li>
{/block:Photoset}
{block:Quote}
<li class="post quote">
"{Quote}"
{block:Source}
<div class="source">{Source}</div>
{/block:Source}
</li>
{/block:Quote}
{block:Link}
<li class="post link">
<a href="{URL}" class="link" {Target}>{Name}</a>
{block:Description}
<div class="description">{Description}</div>
{/block:Description}
</li>
{/block:Link}
{block:Chat}
<li class="post chat">
{block:Title}
<h3><a href="{Permalink}">{Title}</a></h3>
{/block:Title}
<ul class="chat">
{block:Lines}
<li class="{Alt} user_{UserNumber}">
{block:Label}
<span class="label">{Label}</span>
{/block:Label}
{Line}
</li>
{/block:Lines}
</ul>
</li>
{/block:Chat}
{block:Video}
<li class="post video">
{Video-500}
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</li>
{/block:Video}
{block:Audio}
<li class="post audio">
{AudioPlayerBlack}
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</li>
{/block:Audio}
{/block:Posts}
</ol>
</div>
</div>
<p id="footer">
<div class="navigation">
{block:PreviousPage}
<a href="{PreviousPage}">« Previous</a>
{/block:PreviousPage}
{block:NextPage}
<div class="nav-previous">
<a href="{NextPage}">Next »</a>
</div>
{/block:NextPage}
</div>
<a href="/archive">Archive</a>
</p>
</body>
解决了我的问题，我准备打自己一巴掌。
我使用了一些汤博乐特有的无限滚动代码(http://codysherman.com/tools/infinite-scrolling/code)而不是来自infinite-scroll.com的实际无限滚动代码。