Home > Backend Development > PHP Tutorial > 异步加载技术实现当滚动条到最底部的瀑布流效果_php技巧

异步加载技术实现当滚动条到最底部的瀑布流效果_php技巧

WBOY
Release: 2016-05-16 20:36:06
Original
851 people have browsed it

异步加载技术实现瀑布流效果。当滚动条到最底部的时候触发一个事件,这个事件写入$.get()事件,向内部程序页传递类别id和页码,程序将会返回那个类别下的相对页的产品列表,如果程序查询当前类无产品即返回空。

滚动条事件要写在window.onscroll中才有效判断。如下:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

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);

});

 

}

};

Copy after login
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template