JS for unlimited load paging (for mobile)

principle: When the scroll bar reaches the bottom, the next page of content is executed.

Judging conditions requires understanding three concepts:
1.scrollHeight the height of real content
Height of the 2.clientHeight window, which is the height of the content you can see in the browser
The hidden portion of the 3.scrollTop window, that is, the distance the scroll bar scrolls

Ideas:
1. Using the Fixed position loading box
2. Use the $ (window). Scroll () method to trigger whether to load

3. Through the real content height-window height-Hidden parts < 5, as the conditions for loading trigger

JavaScript code:

<script type= "Text/javascript" > var page=2; Current page number Var allpage;    The total page number, will get the Var catid= "{$catid}" from the background; function Showajax (page) {$.ajax ({URL: "", type: "Post", Data:{page:page,catid              : CatID}, success:function (data) {//content to be executed showcontent (data); }})} function Scrollfn () {//the height of the real content var pageheight = Math.max (document.body.scrollheight,docu        Ment.body.offsetHeight); The height of the window var viewportheight = window.innerheight | | Document.documentElement.clientHeight | | Document.body.clientHeight | |        0; Hidden height var scrollheight = Window.pageyoffset | | Document.documentElement.scrollTop | | Document.body.scrollTop | |        0;        if (Pageheight-viewportheight-scrollheight < 50) {//If the trigger condition is met, execute Showajax (page);      }} function Showcontent (data) {var list=eval (' (' +data+ ') ');      var ss= '; for (var i in list) {       ss=ss+ ' <li><a href= "' +list[i][' url ']+ '" > ' +list[i][' title ']+ ' </a></li> ';      } $ (". Minsulist"). Append (ss);  page++; Number of pages plus 1} $ (window). Bind ("scroll", SCROLLFN);//bound scrolling event </script>

　　

Two

$ (window). Scroll (function () {
has scrolled to the top of the page height
var scrolltop = $ (this). ScrollTop ();
Page height
var scrollheight = $ (document). Height ();
browser window height
var WindowHeight = $ (this). Height ();
Here is the event triggered by the scroll bar to the bottom, where the data to be loaded is written, or the action that pulls the scroll bar
if (scrolltop + windowheight = = scrollheight) {
Dragthis.insertdom ();
}
});

Third, JS plug-in

Mobile drop-down refresh, pull-up load more plugins droploadH5 based on iscroll implementation pull-down refresh, pull-up load more

JS for unlimited load paging (for mobile)