一番周折发现网上用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({