├── .gitattributes ├── README.md ├── demo ├── demo.css ├── demo1-document-auto.html ├── demo2-element-auto.html └── demo3-element-click.html ├── images ├── autoLoad.png ├── btn-bg-green.png ├── btn-bg-lightblue.png ├── clickLoad.png └── load.gif ├── jquery.loadMore.css └── jquery.loadMore.min.js /.gitattributes: -------------------------------------------------------------------------------- 1 | *.css linguist-language=javascript 2 | *.html linguist-language=jquery 3 | 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## loadMore v1.01 2 | 边滚动边加载数据( Load the data while scrolling) 3 | 4 | 5 | 6 | ## 插件介绍 7 | ### 1. 使用环境 8 | * pc端 9 | 10 | * 移动端 11 | 12 | * 依赖jquery,版本没有特别的限制. 13 | 14 | 15 | 16 | ### 2. 基本功能 17 | 18 | 19 | 20 | ####  功能1: 滚动条到达底部时,执行用户指定的方法 21 | 默认开启ajax请求数据 22 | 也可以关闭ajax请求, 再指定一个回调函数做其他的事情 23 | 24 | #### 25 | 26 | ####  功能2: 滚动条到达底部,启用ajax请求数据 27 | 28 | * 加载方式1: (手动) 点击 "加载更多" 加载内容 29 | 30 | * 加载方式2: (自动) 滚动条到达底部时自动加载新内容 31 | 两种功能可以自由选择 32 | 33 | * 选择加载方式1时,有默认的 "加载更多" 按钮,样式可以覆盖重写 34 | 35 | * 支持某个元素的加载方式 和 整个页面的加载方式 36 | 37 | 38 | 39 | 01 单个元素自动加载效果 40 | 41 | ![单个元素自动加载效果](images/autoLoad.png) 42 | [点击查看demo演示](https://huangchiyu.github.io/jquery.loadMore/demo/demo2-element-auto.html) 43 | 44 | 45 | 46 | 47 | 02 单个元素手动点击加载效果: 48 | 49 | ![单个元素手动点击加载效果](images/clickLoad.png) 50 | [点击查看手动点击加载demo演示](https://huangchiyu.github.io/jquery.loadMore/demo/demo3-element-click.html) 51 | 52 | 53 | 54 | 03 给document绑定滚动事件 55 | 56 | [点击查看document绑定效果](https://huangchiyu.github.io/jquery.loadMore/demo/demo1-document-auto.html) 57 | 58 | 59 | ### 3. 使用说明 60 | 61 | 62 | 63 | * #### 参数介绍 64 | 65 | // 关注 66 | loadType: 'auto', // 加载方式,自动加载或点击加载 auto || click 67 | ajaxSwitch: true, // 是否启用ajax请求, 可以选择不启用,到达底部执行一个回调函数 68 | url: '', 69 | data: {}, 70 | type: 'get', 71 | success: function () {}, // 请求成功的回调 72 | error: function () {}, // 请求错误时的回调 73 | callback: function () {}, // 不启用ajax时,单纯的到达底部执行回调 74 | 75 | // 可选参数 76 | async: true, 77 | dataType: 'json', // 请求方式 78 | conLocation: "", // 加载更多 按钮追加到哪个元素下面, 默认为: body 或 当前元素 79 | scrollBottom: 100, // 距离底部100时执行回调 80 | imgLoading: loading, // 请求数据时显示的loading 81 | clickLoading: clickLoading, // "加载更多" 按钮 82 | 83 | 84 | 85 | * #### 在页面上调用jquery.loadMore 86 | >**单个元素,滚动事件的调用方式** 87 | 88 | 伪代码: 89 | $('#box').loadMore({ 90 | 91 | url: 'http://test.com', 92 | success: function (res) { 93 | console.log(res); 94 | render(res.data); 95 | } 96 | }); 97 | 98 | 99 | 100 | >**整个页面,滚动事件的调用方式** 101 | 102 | 伪代码: 103 | $(document).loadMore({ 104 | 105 | url: 'http://test.com', 106 | success: function (res) { 107 | console.log(res); 108 | render(res.data); 109 | } 110 | }); 111 | 112 | 113 | 114 | ### 4. 后面可能会添加的功能 115 | 116 | * ajax 跨域请求数据 117 | * 其他的没有想到,你要是有好主意可以给俺留言 118 | -------------------------------------------------------------------------------- /demo/demo.css: -------------------------------------------------------------------------------- 1 | #divP { width: 335px; height: 550px; overflow: auto; margin: 0 auto; border: 1px solid #aaa; } 2 | #divC { width: 220px; min-height: 1000px; margin:0 auto; } 3 | #divC .box {display: flex;align-items:center;justify-content: center; width: 200px; min-height: 150px; height:auto; margin-top: 10px; overflow:hidden; border: 1px solid #eee; text-align: center; } 4 | #divC .images {width: 100%;} 5 | -------------------------------------------------------------------------------- /demo/demo1-document-auto.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 给整个网页加滚动条 5 | 6 | 7 | 8 | 9 | 10 |
11 |
1
12 |
2
13 |
3
14 |
4
15 |
5
16 |
6
17 |
7
18 |
8
19 |
9
20 |
10
21 |
22 | 23 | 24 | 25 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /demo/demo2-element-auto.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 给某个独立元素加滚动条 5 | 6 | 7 | 8 | 9 | 10 |
11 |
12 |
1
13 |
2
14 |
3
15 |
4
16 |
17 |
18 | 19 | 20 | 52 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /demo/demo3-element-click.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 给某个独立元素加滚动条 5 | 6 | 7 | 8 | 9 | 10 |
11 |
12 |
1
13 |
2
14 |
3
15 |
4
16 |
5
17 |
6
18 |
19 |
20 | 21 | 22 | 55 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /images/autoLoad.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangchiyu/jquery.loadMore/6bbde3ee069f4620ae6186cd1c6ece10087c3ed7/images/autoLoad.png -------------------------------------------------------------------------------- /images/btn-bg-green.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangchiyu/jquery.loadMore/6bbde3ee069f4620ae6186cd1c6ece10087c3ed7/images/btn-bg-green.png -------------------------------------------------------------------------------- /images/btn-bg-lightblue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangchiyu/jquery.loadMore/6bbde3ee069f4620ae6186cd1c6ece10087c3ed7/images/btn-bg-lightblue.png -------------------------------------------------------------------------------- /images/clickLoad.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangchiyu/jquery.loadMore/6bbde3ee069f4620ae6186cd1c6ece10087c3ed7/images/clickLoad.png -------------------------------------------------------------------------------- /images/load.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangchiyu/jquery.loadMore/6bbde3ee069f4620ae6186cd1c6ece10087c3ed7/images/load.gif -------------------------------------------------------------------------------- /jquery.loadMore.css: -------------------------------------------------------------------------------- 1 | ._loadMore-imgLoading{ text-align: center;margin:10px auto } 2 | ._loadMore-imgLoading img{ margin-right: 12px;vertical-align: middle;width: 22px;} 3 | ._loadMore-click {padding-top: 30px;padding-bottom: 50px;border: none;} 4 | ._loadMore-click span:hover{ color: blue; background: url("images/btn-bg-green.png") repeat; } 5 | ._loadMore-click span:active{ color: red; } 6 | ._loadMore-click span{ display: block; min-width: 200px; width:60%; height: 40px; line-height: 40px; margin: 0 auto; border: 1px solid #fff; border-radius: 5px; text-align: center; cursor: pointer; background: url("images/btn-bg-lightblue.png") repeat; background-size: 100% 100%; } 7 | -------------------------------------------------------------------------------- /jquery.loadMore.min.js: -------------------------------------------------------------------------------- 1 | ;(function($,i,j,k){'use strict';if(typeof jQuery==='undefined'){throw new Error('scrollLoad 依赖于jQeruy,请先引 jQuery 再使用.');} 2 | var l=getPath();$.fn.loadMore=function(d){var e=$("
正在加载,请稍后...
");var f=$('
点击加载更多
');var g,opts,contentH,viewH,scrollTopH,running=false,DEFAULTS={loadType:'auto',ajaxSwitch:true,url:'',data:{},type:'get',success:function(){},error:function(){},callback:function(){},async:true,dataType:'json',conLocation:"",scrollBottom:100,imgLoading:e,clickLoading:f,};function Load(){this.init=function(a){opts=$.extend({},DEFAULTS,d);if(opts.conLocation){opts.conLocation=$(opts.conLocation)}else if(a[0]===j||a[0]===i){opts.conLocation=$("body");g=$(j)}else{opts.conLocation=a;g=a} 3 | this.startTime=+new Date();var b=this;if(!opts.ajaxSwitch){g.on('scroll',function(){b.throttle(b.noAjax,50)});return} 4 | if(opts.loadType==='auto'){opts.conLocation.css('padding-bottom','50px');g.on('scroll',function(){b.throttle(b.autoLoad,50)})}else{opts.clickLoading.on('click',function(){b.handleClick()});opts.conLocation.append(opts.clickLoading)} 5 | var c=$('');$('head').append(c)}} 6 | Load.prototype={autoLoad:function(){if(opts.ajaxSwitch===true&&running===false){this.countHeight();var a=contentH-viewH-scrollTopH;if(a<=opts.scrollBottom){opts.imgLoading&&opts.conLocation.append(opts.imgLoading);g.scrollTop(scrollTopH-opts.scrollBottom-3);this.getData()}}},handleClick:function(){if(!running){this.getData();$("._loadMore-click").hide();opts.conLocation.append(opts.imgLoading)}},noAjax:function(){this.countHeight();if(running=false&&contentH-viewH-scrollTopH<=opts.scrollBottom){running=true;opts.callback();running=false}},getData:function(){running=true;var b=this;$.ajax({url:opts.url,async:opts.async,data:opts.data,type:opts.type,dataType:opts.dataType,success:function(a){opts.success(a);b.loadingOperation()},error:function(a){b.loadingOperation();opts.error&&opts.error(a)}})},countHeight:function(){if(g[0]===j||g[0]===i){contentH=$(j).innerHeight();viewH=$(i).innerHeight();scrollTopH=$(j).scrollTop()}else{contentH=g.get(0).scrollHeight;viewH=g.innerHeight();scrollTopH=g.scrollTop()}},loadingOperation:function(){running=false;$('._loadMore-imgLoading').remove();if(opts.loadType==='click'){opts.conLocation.append(opts.clickLoading);opts.clickLoading.show()}},throttle:function(a,b){var c=+new Date();if(c-this.startTime>=b){this.startTime=c;a.call(this)} 7 | if(contentH-viewH-scrollTopH<20&&opts.loadType==='auto'){g.scrollTop(scrollTopH-opts.scrollBottom-20)}},updatePram:function(a,b){opts[a]=b}};var h=new Load();h.init(this);return{updatePram:h.updatePram}};function getPath(){var a=j.scripts,b=a[a.length-1].src;return b.substring(0,b.lastIndexOf("/")+1)}})(jQuery,window,document,undefined); --------------------------------------------------------------------------------