Ajax implementation of the waterfall flow trigger paging and page-triggering waterfall flow _jquery

The so-called waterfall flow effect is just like the light bed home effect, a number of similar columns closely arranged, as far as possible to the gap between the smallest (i.e. fluid layout), and as the page scroll down, the new data will be appended to the end of the current page until all data loaded (scrolling triggered Ajax page).

Waterfall Streaming triggers paging

Here's a thought, though not all of the following examples can be used:
1. When entering the screen, determine whether the content is empty, if not NULL, start initializing the data.
2. When pulling to the screen, determine the bottom of the data and screen height + scrolling height of the size. If the bottom is less than the sum of the two above, request the interface again, that is, load the data.
3. When the data exceeds a certain number of pages, stop loading or display in the form of pagination, click and then display content.

var intf_url= "http://jb51.net/intf";
var pathurl = "http://jb51.net/";
var page=1; 
var Isloadrb=false;
var ul_select=$ ("#fansList");
var btn_more=$ ("#loading");
if (Ul_select.length <1) return;
var is_more =true;
 Cross-domain Request interface function Loadjs (src,callback) {var js= document.createelement (' script ');
 JS.SRC = src; Js.onreadystatechange = Js.onload =function () {if (!js.readystate | | js.readystate== ' loaded ' | | js.readystate== ' complet E ') {if (callback) {callback () | |
 callback};
}
};
Js.charset= "Utf-8";
document.getElementsByTagName (' head ') [0].appendchild (JS); }//callback function function fill (data) {if (Data.pagecount==data.pageno) {is_more=false;//$ ("#loading") is canceled if the data is all loaded. HTML ("Plus
Loaded "); }//Resolve interface function queryintf () {var url=page==1?intf_url+ ". Json": intf_url+ "_page" +page+ ". JSON"; Loadjs (Url,callback)
;
 The function callback () {page++}/* Determines whether to load the interface/function NEEDTOLOADRB () {var btn_top=btn_more.offset (). Top;
 var window_height=$ (window). Height ();
 var scroll_top=$ (window). scrolltop (); REturn btn_top<scroll_top+window_height?true:false;
 } $ (window). Scroll (function () {var _needload=needtoloadrb ();
if (_needload && isloadrb==false &&is_more) {isloadrb=true;queryintf ();}}) 
Window.onload = function () {queryintf ();
 }

The above is relatively simple with the drop content constantly loaded with the idea code.

JSON format is similar to (if it is a dynamic interface, you can pass the callback function, there is no Fill ()):

Fill ({"Fans": [{"nickname": "Cai Bao Kennedy", "website": "Jb51.net", "Youzhi": "2.5", "Time": "3 minutes Ago"},{"nickname": "Cai Bao", "website" : "Jb51.net", "Youzhi": "2.5", "Time": "3 minutes Ago"},{"nickname": "Cai Bao Kennedy", "website": "Jb51.net", "Youzhi": "2.5", "Time": "3 minutes Ago"} , {"nickname": "Cai Bao", "website": "Jb51.net", "Youzhi": "2.5", "Time": "3 minutes Ago"},{"nickname": "Cai Bao Kennedy", "website": "Jb51.net", " Youzhi ":" 2.5 "," Time ":" 3 minutes Ago "},{" nickname ":" Cai Bao Kennedy "," website ":" Jb51.net "," Youzhi ":" 2.5 "," Time ":" 3 minutes Ago "},{" nickname ": "Cai Bao", "website": "Jb51.net", "Youzhi": "2.5", "Time": "3 minutes Ago"},{"nickname": "Cai Bao Kennedy", "website": "Jb51.net", "Youzhi": "2.5" , "Time": "3 minutes Ago"},{"nickname": "Cai Bao Kennedy", "website": "Jb51.net", "Youzhi": "2.5", "Time": "3 minutes Ago"},{"nickname": "Cai Bao Kennedy", " Website ":" Jb51.net "," Youzhi ":" 2.5 "," Time ":" 3 minutes Ago "}," PageCount ": 2," PageNo ": 1," pageSize ": Ten," TotalSize ":
);

The original static can also do interface callback. Through static processing, it greatly alleviated the server pressure and speed up the generation of content, is a large flow site must deal with the way.

jquery Ajax method to implement paging trigger waterfall flow

1. Get the content of the next page in Ajax Way
We need a Web page with the following HTML structure navigation, Next_link for the next page of the URL.

<div id= "Page_nav" >
  <a href= "Next_link" > Next </a>
</div>

The corresponding CSS

#page_nav {clear:both; text-align:center;}

The following code retrieves the contents of the next page in an Ajax manner and appends it to the end of the current content.

Nexthref = $ ("#next_page a"). attr ("href");
Bind the browser window to the scroll event
$ (window). Bind ("scroll", function () {
  //determine if the scroll bar of the window is close to the bottom of the page
  if ($ (document). scrolltop () + $ (window). Height () > $ (document). Height ()--(a) {
    //To determine whether the next page link is empty
    if (nexthref!= undefined) {
      //Aja X page
      $.ajax ({
        URL: $ ("#page_nav a"). attr ("href"),
        Type: "POST",
        success:function (data) {
          result = $ (data). Find ("#thumbs. Imgbox");
          Nexthref = $ (data). Find ("#page_nav a"). attr ("href");
          $ ("#page_nav a"). attr ("href", nexthref);
          $ ("#thumbs"). Append (result);
        }
      );
    else {
      $ (' #page_nav '). Remove ();
    }}}
;

2. Fluid layout of additional content
children's shoes that are familiar with JQuery should understand that JS does not work with the elements that are inserted into the page through Ajax, but there is no need to do such things as using live (), because masonry has already made similar processing internally and defaults to the effect, so just make it in Ajax Call the Masonry () method in the callback function after the work is executed.

$newElems = $result;
$newElems. imagesloaded (function () {
  $container. Masonry (' appended ', $newElems, True);
});

3. Modify the Ajax paging process
There is already a complete waterfall layout in the process, but there is no hint during the page turn, and inserting multiple pictures directly may affect the user experience, so you need to make some modifications to the page-flipping process, giving the complete code below.
Here you need to add one of the following elements to indicate that the new content is loading or that the prompt is on the last page.

<div id= "page_loading" >
  <span> Force loading ......</span>
</div>

The corresponding CSS

Copy Code code as follows:

#page_loading {display:none; background: #111111; opacity:0.7; height:60px; width:220px; padding:10px; Position:absolute; Bottom: -50px; left:330px; }

Here is the complete Ajax page-flipping code

Nexthref = $ ("#next_page a"). attr ("href"); Bind the browser window to the Scroll event $ (window). Bind ("scroll", function () {//Determine if the scroll bar of the window is close to the bottom of the page if ($ (document). ScrollTop () + $ (window). Height () > $ (document). Height ()-10) {//Determine whether the next page link is empty if (nexthref!= undefined) {//Show loading module $
      ("#page_loading"). Show ("slow"); Ajax page $.ajax ({URL: $ ("#page_nav a"). attr ("href"), type: "POST", success:function (Dat
          a) {result = $ (data). Find ("#thumbs. Imgbox");
          Nexthref = $ (data). Find ("#page_nav a"). attr ("href");
          $ ("#page_nav a"). attr ("href", nexthref);
          $ ("#thumbs"). Append (result);
          Set the new content to transparent $newElems = Result.css ({opacity:0});
            $newElems. imagesloaded (function () {$container. Masonry (' appended ', $newElems, true);
            Fade new content $newElems. Animate ({opacity:1});              
        Hides the module $ ("#page_loading") being loaded. Hide ("slow");  });
    }
      }); else {$ ("#page_loading span"). Text ("Wood has a Oh, the last page!")
      ");
      $ ("#page_loading"). Show ("Fast");
      SetTimeout ("$ (' #page_loading '). Hide ()", 1000);
    SetTimeout ("$ (' #page_loading '). Remove ()", 1100);
 }
  }
});