首頁 後端開發 php教程 异步加载技术实现当滚动条到最底部的瀑布流效果_PHP

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

May 31, 2016 pm 07:30 PM
非同步載入 瀑布流

异步加载技术实现瀑布流效果。当滚动条到最底部的时候触发一个事件,这个事件写入$.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);
});

}
};
登入後複製

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前 By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

揭露Ajax異常,解決錯誤的方法一覽 揭露Ajax異常,解決錯誤的方法一覽 Jan 30, 2024 am 08:33 AM

揭露Ajax異常,解決錯誤的方法一覽

有效應對jQuery .val()不起作用的情勢 有效應對jQuery .val()不起作用的情勢 Feb 20, 2024 pm 09:36 PM

有效應對jQuery .val()不起作用的情勢

Scrapy基於Ajax非同步載入實作方法 Scrapy基於Ajax非同步載入實作方法 Jun 22, 2023 pm 11:09 PM

Scrapy基於Ajax非同步載入實作方法

CSS要怎麼實現瀑布流?兩種方式介紹 CSS要怎麼實現瀑布流?兩種方式介紹 Sep 26, 2021 am 10:58 AM

CSS要怎麼實現瀑布流?兩種方式介紹

如何透過純CSS實現瀑布流佈局的方法與技巧 如何透過純CSS實現瀑布流佈局的方法與技巧 Oct 20, 2023 pm 06:01 PM

如何透過純CSS實現瀑布流佈局的方法與技巧

html怎麼讀取 html怎麼讀取 Apr 05, 2024 am 08:36 AM

html怎麼讀取

Vue3中的suspense函數詳解:優化非同步資料加載 Vue3中的suspense函數詳解:優化非同步資料加載 Jun 18, 2023 am 08:10 AM

Vue3中的suspense函數詳解:優化非同步資料加載

Vue3中的defineAsyncComponent函數詳解:非同步載入元件的應用 Vue3中的defineAsyncComponent函數詳解:非同步載入元件的應用 Jun 18, 2023 pm 07:39 PM

Vue3中的defineAsyncComponent函數詳解:非同步載入元件的應用

See all articles