大佬教程收集整理的这篇文章主要介绍了jquery – 在Tumblr上用石工打破的无限卷轴，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我已经尝试阅读无限滚动和砌体文档,查看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@R_782_6964@}
<h3><a href="{Permalink}">{titlE}</a></h3>
{/block@R_782_6964@}
{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@R_782_6964@}
<h3><a href="{Permalink}">{titlE}</a></h3>
{/block@R_782_6964@}
<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>
以上是大佬教程为你收集整理的jquery – 在Tumblr上用石工打破的无限卷轴全部内容，希望文章能够帮你解决jquery – 在Tumblr上用石工打破的无限卷轴所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。