达维营-前端网一番周折发现网上用infinitescroll 这不是多 ，给出的信息都是不全，以下是自己使用的总结，供大家参考
说明：
每个页面显示的图片尽量要多一些必须出现滚动条，这样才能实现滚动的实现加载第二页。所以我自己的分页是每页显示40个图片，因为有的图片比较短，所以每页显示的条数比较多
默认的话以下的分页链接只允许传一个参数page，为了能够传入自己的参数需要使用以下红色字体部分
<div id=”navigation”><a href=”ScrollHtml.aspx?page=1″></a></div>
imagesloaded.pkgd.js 是为了确保图片加载之后实现瀑布流
query.masonry.min.js 是用于实现瀑布流的
query.infinitescroll.min.js 是用于实现无限滚动的
我自己对jQuery.infinitescroll.min.js 这个脚本做了更改，便于实现在加载第二页的时候显示loading 主要是更改了beginAjax 方法：紫色部分是我做的更改
$(opts.loading.selector).show();
$(“#black_bj”).show();
switch (method) {
case ‘html+callback’:
instance._debug(‘Using HTML via .load() method’);
box.load(desturl + ‘ ‘ + opts.itemSelector, undefined, function infscr_ajax_callback(responseText) {
instance._loadcallback(box, responseText, desturl);
});
break;
case ‘html’:
instance._debug(‘Using ‘ + (method.toUpperCase()) + ‘ via $.ajax() method’);
$.ajax({
// params
url: desturl,
dataType: opts.dataType,
complete: function infscr_ajax_callback(jqXHR, textStatus) {
condition = (typeof (jqXHR.isResolved) !== ‘undefined’) ? (jqXHR.isResolved()) : (textStatus === “success” || textStatus === “notmodified”);
if (condition) {
instance._loadcallback(box, jqXHR.responseText, desturl);
} else {
instance._error(‘end’);
}
$(opts.loading.selector).hide();
$(“#black_bj”).hide();
}
});
break;
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head runat=”server”>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<script src=”js/jquery-1.7.2.min.js”></script>
<script src=”js/imagesloaded.pkgd.js” type=”text/javascript”></script>
<script src=”js/jquery.masonry.min.js” type=”text/javascript”></script>
<script src=”js/jquery.infinitescroll.min.js” type=”text/javascript”></script>
</head>
<body>
<div class=”nei_con” style=”background: #fff9ed” id=”wrapper”>
<div class=”show_list” id=”show_list”>
<div class=”show_list_main” id=”waterfall”>
<asp:Repeater runat=”server” ID=”repListSilver”>
<ItemTemplate>
<div class=”show_list_con”>
<div class=”show_pic”>
<a href=’/WBPersonalPage.aspx?hid=<%#Eval(“hid”) %>’ target=”_blank”>
<img src=”<%#Eval(“imgurl”) %>”></a>
</div>
</div>
</ItemTemplate>
</asp:Repeater>
</div>
<div class=”loading” id=”loading”>
<img src=”images/loading.gif” /><span>正在加载…</span>
</div>
</div>
</div>
<div id=”navigation”><a href=”ScrollHtml.aspx?page=1″></a></div>
<div id=”black_bj” class=”black_bj” style=”display: none;”></div>
<script type=”text/javascript”>
$(function () {
// element
imagesLoaded(document.querySelector(‘#waterfall’), function (instance) {
$(‘#wrapper’).masonry({
itemSelector: ‘.show_list_con’,
gutterWidth: 10,
columnWidth: 200,
isFitWidth: false//这里设置为false 表示采用自己的样式 不自适应
});
$(‘#waterfall’).infinitescroll({
maxPage: <%=Math.Ceiling(totalRecords/(pagesize*1.0))%>,
navSelector: “#navigation”, //导航的选择器，会被隐藏
nextSelector: “#navigation a”, //包含下一页链接的选择器
itemSelector: “.show_list_con”, //你将要取回的选项(内容块)
debug: true, //启用调试信息
animate: true, //当有新数据加载进来的时候，页面是否有动画效果，默认没有
extraScrollPx: 150, //滚动条距离底部多少像素的时候开始加载，默认150
bufferPx: 40, //载入信息的显示时间，时间越大，载入信息显示时间越短
errorCallback: function () {
alert(‘error’);
}, //当出错的时候，比如404页面的时候执行的函数
localMode: true, //是否允许载入具有相同函数的页面，默认为false
dataType: ‘html’,//可以是json
// template: function(data) {
// //data表示服务端返回的json格式数据，这里需要把data转换成瀑布流块的html格式，然后返回给回到函数
// return ”;
// },
loading: {
msgText: “加载中…”,
finishedMsg: ‘没有新数据了…’,
selector: ‘#loading’ // 显示loading信息的div
}
,pathParse:function(path,index){
return “CandidateScrollHtml.aspx?page=”+index+”&tag=<%=tag%>&h=<%=h%>”;
} // 采用自己的url切割方式以便传入除了page之外的参数
,path:function(index){
return “CandidateScrollHtml.aspx?page=”+index+”&tag=<%=tag%>&h=<%=h%>”;
}// 采用自己的url切割方式以便传入除了page之外的参数
}, function (newElems) {
//程序执行完的回调函数
var $newElems = $(newElems);
$(‘#wrapper’).masonry(‘appended’, $newElems);
$(“#loading”).hide();
$(“#black_bj”).hide();
});
});
});
</script>
</body>
</html>