Asynchronous loading technology for waterfall streaming effects, asynchronous loading technology waterfall _php Tutorial

Asynchronous loading technology for waterfall streaming effect, asynchronous loading technology waterfall

Asynchronous loading technology to achieve waterfall flow effect. When the scroll bar to the bottom of the trigger an event, the event is written to the $.get () event, to the internal Program page to pass the Category ID and page number, the program will return to the category of the relative page of the product list, if the program query the current class no product is returned empty.

Scroll bar events are written in Window.onscroll to be valid. As follows:

Window.onscroll=function () {
　　　　       var scrolltop=document.documentelement.scrolltop| | Document.body.scrollTop;        var tops =    $ (document). ScrollTop ();//Gets the position of the scroll bar        var sctop = $ (document). Height ()-$ (window). Height ();        var id = $ ("#ajax_claid"). Val ();        if (!id) {             id=8;        }        $ ("#ajax_p"). Val (tops);        if (tops>=sctop)//Set up instructions scroll bar already at the bottom        {            var b=$ ("#ajax_p"). Val ();            if (b>a) {                page=page+1;//pass page number            }            var Url = "aja_pro/" +id+ "/" +page;//Program page, query information return data, directly return the information with HTML.                    $.get (url,function (data) {                $ ("#aja_jia"). Append (data);}            );                    }    ;

　　

My HTML page is too long, how to achieve similar waterfall stream effect? is to load the rest of the content when browsing to the bottom?

① data is divided into two parts, the remainder is placed in a JSON, the data can be placed in the JS code.
② implements a 4-column layout that establishes several UL as the initial data display for the page.
③ by judging the distance from the last Li distance to the browser window, the trigger function adds the data in the JSON to the page in the form of UL.

How to implement the asynchronous loading of the page?

White is no refresh technology
jquery inside has encapsulated the effects of Ajax we can use directly,. ajax. Post. Get. Load
For example a click Method