Asynchronous loading technology achieves waterfall flow effect, asynchronous loading technology waterfall_PHP tutorial

Asynchronous loading technology achieves waterfall flow effect, asynchronous loading technology waterfall

Asynchronous loading technology achieves waterfall flow effect. When the scroll bar reaches the bottom, an event is triggered. This event is written into the $.get() event and the category id and page number are passed to the internal program page. The program will return the product list of the relative page under that category. If the program queries If there is no product in the current class, it will return empty.

Scroll bar events must be written in window.onscroll to be effective. As follows:

window.onscroll=function(){<br />　　　　
       // var scrolltop=document.documentElement.scrollTop||document.body.scrollTop;
        var tops =    $(document).scrollTop(); //获取滚动条的位置
        var sctop = $(document).height()-$(window).height();
        var id = $("#ajax_claid").val();
        if(!id){
             id=8;
        }
        $("#ajax_p").val(tops);
        if(tops>=sctop)//成立说明滚动条已在最底部
        {
            var b=$("#ajax_p").val();
            if(b>a){
                page=page+1;//传递页码
            }
            var Url = "aja_pro/"+id+"/"+page;//程序页面，查询信息返回数据，直接返回带html的信息。
        
            $.get(Url,function(data){
                $("#aja_jia").append(data);
            });
            
        }
    };

　

My html page is too long, how can I achieve a waterfall-like effect? Is it to load the remaining content when browsing to the bottom?

①The data is divided into two parts, and the remaining part is placed in a JSON. If the data is small, it can be placed in js code.
② Implement a 4-column layout and create several uls as the initial data display on the page.
③ By judging the distance between the last li and the browser window, the trigger function traverses and adds the data in JSON to the page in the form of ul.

How to implement asynchronous loading of pages?

To put it bluntly, it is a refreshless technology
The jquery internal library has encapsulated the ajax effect and we can use it directly, .ajax .post .get .load
For example, a click method

http://www.bkjia.com/PHPjc/878812.htmlwww.bkjia.comtruehttp: //www.bkjia.com/PHPjc/878812.htmlTechArticleAsynchronous loading technology realizes waterfall flow effect, asynchronous loading technology waterfall asynchronous loading technology realizes waterfall flow effect. An event is triggered when the scroll bar reaches the bottom. This event is written...