石積みと無限のスクロールを組み合わせようとしているtumblrテーマに取り組んでいます。石積みは機能しますが、無限のスクロールを追加するとすぐに壊れ始めます。2番目のページのコンテンツが最初のページのコンテンツの後ろに表示されます。[次のページ]をクリックすると、ページ1の下部に新しい要素を読み込む代わりに、ページ2に移動します。
無限のスクロールと石積みのドキュメントを読み、StackOverflowで同様の質問を調べ、HTML構造とJavascript設定を試してみましたが、これまでのところまったく運がありませんでした。誰かが私のコードを見て、私が何か間違ったことをしている場合は私に知らせてもらえますか？私がしたいのは、ユーザーが「次のページ」をクリックしたときに、2ページ目の新しい要素が下部に読み込まれることです。
これが私のテストtumblrのURLです：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>