InfiniteScroll, Masonry , FreeMarker ,jsrender大杂脍
原相关文档实在过于简略，摸索好几个小时才有结果，存档备查！
@{
ViewBag.Title = "InfiniteScroll";
Layout = "~/Views/Shared/_Layout.cshtml";
<link rel="stylesheet" href="/diy/js/InfiniteScroll/style.css">
<script type="text/javascript" src="/diy/js/InfiniteScroll/jquery.infinitescroll.min.js?ver=1.12"></script>
<script type="text/javascript" src="/diy/js/InfiniteScroll/manual-trigger.js?ver=1.11"></script>
<style type="text/css">
#infscr-loading {
text-align: center;
z-index: 100;
position: fixed;
left: 45%;
bottom: 40px;
width: 500px;
padding: 10px;
background: #000;
opacity: 0.8;
color: #FFF;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
</style>
}
<div id="secondNav" class="normal">
<div class="container">
<div action="" class="row">
<div class="col-md-4" style="font-size:18px;">文章列表 </div>
<div class="col-md-3" style="font-size:18px;">
<input type="text" class="form-control" style="height:28px; border:1px solid #ff6a00;margin-left:0;" name="searchCategory" id="searchCategory" value="" placeholder="指定文章分类" />
</div>
<div class="col-md-4">
<button class="btn btn-xs btn-primary " id="btnBrushArticle" style="height:28px;margin-left:-28px;" onclick="javascript:BrushArticle()">查询</button>
<span class="pull-left1" id="spanCal" style="color:orangered;width:300px;margin-left:1px;">.</span>
</div>
<div class="col-md-1">
<a href="/ArticleMaster/Articles/edit" class="btn btn-xs btn-danger ">新建文章</a>
</div>
</div><marquee direction="left" behavior1="alternate" bgcolor="#ff6a00"><a href="#">从右向左滚动吧~~滚吧滚吧滚动吧~~</a></marquee>
</div>
</div>
<div style="height:20px;"></div>
<div style="height:20px;"></div>
<div id="debug">
<a href="#" id="debug-trigger">+</a>
<h3>Debug bar</h3>
<nav id="debug-nav">
<a href="#" rel="destroy">Destroy</a>
<a href="#" rel="pause">Pause</a>
<a href="#" rel="resume">Resume</a>
<a href="#" rel="toggle">Toggle</a>
<a href="#" rel="scroll">Scroll</a>
<a href="#" rel="unbind"><span>Unbind</span></a>
<a href="#" rel="bind"><span>Bind</span></a>
<a href="#" rel="retrieve">Retrieve</a>
<a href="#" rel="cthullu">Invalid command</a>
<a href="#" rel="pause" data-arg="the-apocalypse">Invalid argument</a>
</nav>
</div>
<div id="content">
<h1>Infinite Scroll Testing</h1>
<p>1 One for all and all for one, Muskehounds are always ready. One for all and all for one, helping everybody. One for all and all for one, it's a pretty story. Sharing everything with fun, that's the way to be. One for all and all for one, Muskehounds are always ready. One for all and all for one, helping everybody. One for all and all for one, can sound pretty corny. If you've got a problem chum, think how it could be.</p>
<p>2 Barnaby The Bear's my name, never call me Jack or James, I will sing my way to fame, Barnaby the Bear's my name. Birds taught me to sing, when they took me to their king, first I had to fly, in the sky so high so high, so high so high so high, so - if you want to sing this way, think of what you'd like to say, add a tune and you will see, just how easy it can be. Treacle pudding, fish and chips, fizzy drinks and liquorice, flowers, rivers, sand and sea, snowflakes and the stars are free. La la la la la, la la la la la la la, la la la la la la la, la la la la la la la la la la la la la, so - Barnaby The Bear's my name, never call me Jack or James, I will sing my way to fame, Barnaby the Bear's my name.</p>
<p>3 There's a voice that keeps on calling me. Down the road, that's where I'll always be. Every stop I make, I make a new friend. Can't stay for long, just turn around and I'm gone again. Maybe tomorrow, I'll want to settle down, Until tomorrow, I'll just keep moving on.</p>
<p>4 Top Cat! The most effectual Top Cat! Who's intellectual close friends get to call him T.C., providing it's with dignity. Top Cat! The indisputable leader of the gang. He's the boss, he's a pip, he's the championship. He's the most tip top, Top Cat.</p>
<p>5 Hong Kong Phooey, number one super guy. Hong Kong Phooey, quicker than the human eye. He's got style, a groovy style, and a car that just won't stop. When the going gets tough, he's really rough, with a Hong Kong Phooey chop (Hi-Ya!). Hong Kong Phooey, number one super guy. Hong Kong Phooey, quicker than the human eye. Hong Kong Phooey, he's fan-riffic!</p>
<p>6 Barnaby The Bear's my name, never call me Jack or James, I will sing my way to fame, Barnaby the Bear's my name. Birds taught me to sing, when they took me to their king, first I had to fly, in the sky so high so high, so high so high so high, so - if you want to sing this way, think of what you'd like to say, add a tune and you will see, just how easy it can be. Treacle pudding, fish and chips, fizzy drinks and liquorice, flowers, rivers, sand and sea, snowflakes and the stars are free. La la la la la, la la la la la la la, la la la la la la la, la la la la la la la la la la la la la, so - Barnaby The Bear's my name, never call me Jack or James, I will sing my way to fame, Barnaby the Bear's my name.</p>
<p>7 There's a voice that keeps on calling me. Down the road, that's where I'll always be. Every stop I make, I make a new friend. Can't stay for long, just turn around and I'm gone again. Maybe tomorrow, I'll want to settle down, Until tomorrow, I'll just keep moving on.</p>
<p>8 Top Cat! The most effectual Top Cat! Who's intellectual close friends get to call him T.C., providing it's with dignity. Top Cat! The indisputable leader of the gang. He's the boss, he's a pip, he's the championship. He's the most tip top, Top Cat.</p>
<p>9 Hong Kong Phooey, number one super guy. Hong Kong Phooey, quicker than the human eye. He's got style, a groovy style, and a car that just won't stop. When the going gets tough, he's really rough, with a Hong Kong Phooey chop (Hi-Ya!). Hong Kong Phooey, number one super guy. Hong Kong Phooey, quicker than the human eye. Hong Kong Phooey, he's fan-riffic!</p>
</div>
<a id="next" href="indexa?index=0">next page?</a>
<script src="/Diy/Js/jsrender.min.js"></script>
<script id="reply-template" type="text/x-jsrender">
<p>{{:Titile}}</p>
</script>
<script>
var htmldiv = "";
$('#content').infinitescroll({
navSelector: "#next:last",
nextSelector: "a#next:last",
itemSelector: "#content p",
debug: true,
dataType: 'json',
template: function (data) {
var create_html = $("#reply-template").render(data);
return create_html;
},
maxPage: 6,
animate: true,
loading: {
finishedMsg: "<em style='color:coral;>所有内容已全部载入.</em>",//结束显示信息
msgText: "<em style='color:coral;'>正在载入下一部分内容...</em>",
img: '/diy/js/InfiniteScroll/LoadingAjax.gif'//loading图片ajax-loader.gif
},
prefill: true,
// path: ["http://nuvique/infinite-scroll/test/index", ".html"]
path: function (index) { return "indexa?index=" + index; },
// behavior : 'twitter',
appendCallback: true, // PREPENDING
//pathParse : function( pathStr, nextPage ){ return pathStr.replace('2', nextPage ); }
}, function (newElements, data, url) {
//alert(newElements);
htmldiv = newElements;
//USE FOR PREPENDING
// $(newElements).css('background-color','#ffef00');
//$(this).prepend(newElements);
//END OF PREPENDING
//window.console && console.log('context: ', this);
//window.console && console.log('returned: ', newElements);
});
</script>
<script type="text/javascript">
$(document).ready(function () {
$('#debug-trigger').click(function (e) {
e.preventDefault();
$('#debug').toggleClass('open');
});
$('#debug-nav').find('a').click(function (e) {
e.preventDefault();
var $self = $(this),
action = $self.attr('rel'),
arg = $self.attr('data-arg'),
arg = arg || null;
$('#content').infinitescroll(action, arg);
});
});
</script>
<script type="text/javascript">
//$container.infinitescroll({
// navSelector: '#page-nav', //分页导航的选择器
// nextSelector: '#page-nav a', //下页连接的选择器
// itemSelector: '.box',
// debug: true,
// loading: {
// finishedMsg: '没有更多的图片了...',
// msgText: "正在加载图片...",
// img: '/images/loading.gif'
// },
// dataType: 'json',
// appendCallback: false
//},
////作为回调函数触发masonry
//function (json, opts) {
// // hide new items while they are loading
// $boxes = $("<div class = 'container'></div>");
// $.each(json, function (key, value) {
// myString = "<div class = 'box'>" +
// "<a class='fancybox' data-fancybox-type='iframe' href='/photo/" + value.id +
// "' title='" + value.text + "'>" +
// "<img src='" + value.url +
// "'/></a><div class = 'description'> <div class='star1'></div><div class='star2'></div></div>" +
// "</div>";
// $box = $(myString);
// $boxes.append($box);
// })
// $boxes = $boxes.css({ opacity: 0 });
// console.log($(document).scrollTop());
// $boxes.imagesLoaded(function () {
// $boxes.animate({ opacity: 1 });
// $container.append($boxes).masonry('appended', $boxes);
// })
//}
//)
////由于第一个页面需要提前加载，所以要修改一下就能所有的页面都用Ajax -json方式
//$('#container').css({ 'min-height': $(window).height() - $('.hero-unit').height() + 10 });//自适应修改container的高度
//$(window).scrollTop($(window).height());//滚动条滚动，触发infinitescroll事件
//$(window).scrollTop(0);//恢复滚动条位置
//////////////////////////////////////
//$('#content').infinitescroll({
// navSelector: "div.navigation",
// //导航的选择器，会被隐藏
// nextSelector: "div.navigation a:first",
// //包含下一页链接的选择器
// itemSelector: "#content div.post",
// //你将要取回的选项(内容块)
// debug: true,
// //启用调试信息
// loadingImg: "/img/loading.gif",
// //加载的时候显示的图片
// //默认采用："http://www.infinite-scroll.com/loading.gif"
// loadingText: "我正在给力载入中...",
// //加载的时候显示的文字
// // 默认显示： "<em>Loading the next set of posts...</em>"
// animate: true,
// //当有新数据加载进来的时候，页面是否有动画效果，默认没有
// extraScrollPx: 50,
// //滚动条距离底部多少像素的时候开始加载，默认150
// donetext: "客官已经结束了...",
// //数据加载完的时候显示的信息
// // 默认显示： "<em>Congratulations, you've reached the end of the internet.</em>"
// bufferPx: 40,
// //载入信息的显示时间，时间越大，载入信息显示时间越短
// errorCallback: function () { },
// //当出错的时候，比如404页面的时候执行的函数
// localMode: true //是否允许载入具有相同函数的页面，默认为false
//}, function (arrayOfNewElems) {
// //程序执行完的回调函数
//});
</script>
