程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> 網頁編程 >> PHP編程 >> 關於PHP編程 >> 異步加載技術實現當滾動條到最底部的瀑布流效果,異步滾動條

異步加載技術實現當滾動條到最底部的瀑布流效果,異步滾動條

編輯:關於PHP編程

異步加載技術實現當滾動條到最底部的瀑布流效果,異步滾動條


異步加載技術實現瀑布流效果。當滾動條到最底部的時候觸發一個事件,這個事件寫入$.get()事件,向內部程序頁傳遞類別id和頁碼,程序將會返回那個類別下的相對頁的產品列表,如果程序查詢當前類無產品即返回空。

滾動條事件要寫在window.onscroll中才有效判斷。如下:

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

}
};

Jquery的 scroll事件,實現當滾動條到達最底部時,自動加載新項 aspnet中

這裡有一個lazyload即延遲加載效果
拖動滾動條可以加載顯示的數據
裡面有教程和源碼
參考資料:www.blueidea.com/...=11641
 

利用JS,怎判斷滾動條是否滾動到頁面最底部

改成這樣就可以兼容 IE和chrome
<script type="text/javascript">
window.onscroll=function(){
var a = document.documentElement.scrollTop==0? document.body.clientHeight : document.documentElement.clientHeight;
var b = document.documentElement.scrollTop==0? document.body.scrollTop : document.documentElement.scrollTop;
var c = document.documentElement.scrollTop==0? document.body.scrollHeight : document.documentElement.scrollHeight;

if(a+b==c){
showmore();
}
}
</script>
 

  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved