infinitescroll 通过无限制分页(json方式完整代码)

标签：

@{
ViewBag.Title = " ";
}

<style type="text/css">
#infscr-loading {
text-align: center;
z-index: 100;
position: fixed;
left: 45%;
bottom: 40px;
width: 200px;
padding: 10px;
background: #000;
opacity: 0.8;
color: #FFF;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
</style>
<!-- Begin Small Hero Block -->
@*<section class="hero small accent parallax" style="background-image: url(/images/parallax.png); height:30px">*@
<section class="hero small accent parallax">

<!-- Heading -->
<div class="hero-content container">
<!-- <h1>ITSiteBlog.</h1> -->
<div class="jumbotron" style="background:#2db4d8">
<h1><font color="#fff">Hello, world!</font></h1>
<p>记录Java学习过程的点滴！</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
</div>
<!-- END -->
<!-- Button -->
<div class="sub-hero container">
<!-- <span class="line"></span> -->
</div>
<!-- END -->

</section>
<!-- End Small Hero Block -->
<!-- Begin Blog Block -->
<section class="content container">
<div class="row">

<!-- Begin Posts -->
<div class="col-sm-8">
<!-- Link Post -->
<div id="content">
<h1>Infinite Scroll Testing</h1>
</div>
<a id="next" href="/Home/GetContentList?Catalog=@ViewBag.Catalog&currentPage=2&pageSize=10">next page</a>
</div>
<!-- END -->
<!-- Begin Sidebar -->
<div class="col-sm-4">
<div class="sidebar">

<!-- search widget -->
<div class="widget clearfix">
<form action="#">
<input name="s" id="s" type="text" class="search" placeholder="Search.." value="" />
<input type="submit" value="Go" class="search-submit" />
</form>
</div><!-- END -->
<!-- text widget -->
<div class="widget">
<h5>公告</h5>
<div class="textwidget"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p></div>
</div><!-- END -->
<!-- categories widget -->
@if (ViewBag.CatalogList != null && ViewBag.CatalogList.Count > 0)
{
TempData["CatalogList"] = ViewBag.CatalogList;
<div class="widget">
<h5>类别</h5>
<ul>
@for (int i = 0; i < ViewBag.CatalogList.Count; i++)
{
<li class="cat-item"><a href="?Catalog=@ViewBag.CatalogList[i].ID ">@ViewBag.CatalogList[i].Name</a> (3)</li>
}

</ul>
</div><!-- END -->
}
<!-- tagcloud widget -->
<div class="widget">
<h5>标签</h5>
<div class="tagcloud">
<a href=‘#‘>JAVA</a>
<a href=‘#‘>.NET</a>
<a href=‘#‘>云计算</a>
<a href=‘#‘>大数据</a>
<a href=‘#‘>PHP</a>
<a href=‘#‘>数据库</a>
</div>
</div><!-- END -->
<!-- archives widget -->
@*<div class="widget widget-archive">
<h5>点击最多</h5>
<ul>
<li><a href="#">July 2013</a></li>
<li><a href="#">June 2013</a></li>
</ul>
</div>*@<!-- END -->
<!-- recent comments widget -->
<div class="widget widget-recent-comments">
<h5>最新发布</h5>
<ul id="recentcomments">
@for (int i = 0; i < ViewBag.NewContentList.Count; i++)
{
<li class="recentcomments"> <a href="~/Home/article?contentID=@ViewBag.NewContentList[i].ID">@ViewBag.NewContentList[i].Title @ViewBag.NewContentList[i].PostDate </a></li>
}
</ul>
</div><!-- END -->
<!-- recent posts widget -->
<div class="widget widget-recent-entries">
<h5>推荐文章</h5>
<ul>
<li><a href="#" title="Post Title">Standard post with goodies.</a></li>
<li><a href="#" title="Post Title">Fluid video. Yeah we got that.</a></li>
<li><a href="#" title="Post Title">Gallery post with slider.</a></li>
</ul>
</div><!-- END -->
<!-- recent comments widget -->
@*<div class="widget widget-recent-comments">
<h5>最热文章</h5>
<ul id="recentcomments">
<li class="recentcomments">Admin on <a href="#">Standard post with goodies.</a></li>
<li class="recentcomments">Aether-Themes on <a href="#">Fluid video. Yeah we got that.</a></li>
<li class="recentcomments">Admin on <a href="#">Gallery post with slider.</a></li>
</ul>
</div>*@
<!-- END -->
</div>
</div><!-- END -->

</div>
</section>
<!-- End Blog Block -->
<script type="text/javascript">
$(document).ready(function () {
$(‘#content‘).infinitescroll({
navSelector: "#next:last",
nextSelector: "a#next:last",
itemSelector: "#content",
debug: true,
extraScrollPx: 20,
dataType: ‘json‘,
loading: {
//加载效果
finishedMsg: ‘No more pages to load‘,
},
maxPage: 3,

template: function (data) {
//data表示服务端返回的json格式数据，这里需要把data转换成瀑布流块的html格式，然后返回给回到函数
 
var content = ‘‘;
for (var i = 0; i < data.Data.length; i++) {
content += ‘ <div class="post link"> ‘
+ ‘ <span class="date">30<br><small>Sep</small></span> ‘
+ ‘ <span class="date" style="width:63px;height:63px;padding-bottom:0px;border-bottom:0px">‘
+ ‘ <img src="‘ + data.Data[i].imgUrl + ‘" style="width:63px;height:63px;padding:0px;border:0px" width="63" height="63" />‘
+ ‘ </span>‘
+ ‘ <div class="post-title">‘
+ ‘ <h2><a href="/Home/article?ID=‘ + data.Data[i].ID + ‘">‘ + data.Data[i].Title + ‘</a></h2>‘
+ ‘ <div class="post-meta">‘
+ ‘ <h6> 日期:‘ + data.Data[i].PostDater + ‘ &nbsp;&nbsp;作者:‘ + data.Data[i].Poster + ‘</h6>‘
+ ‘ </div>‘
+ ‘ </div>‘
+ ‘ </div> ‘;
}
}
return content;
}
 
//,function (newElements) {
// $("#content").prepend(newElements);
//}
);
});
</script>

infinitescroll 通过无限制分页(json方式完整代码)

标签：

原文地址：http://www.cnblogs.com/mfc-itblog/p/5344325.html