訂閱本欄目 RSS您所在的位置: 深山工作室 > HTML > 正文

jquery實現下拉加載更多

2022/6/8 10:39:37 字體: 瀏覽 554





實現思路:
只要滾動條拉到的某個位置距離底部距離大于邊框的高度立即加載新數據。

代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>滾動加載更多</title>
<style type="text/css">
body,div {margin:0;padding:0;}
body {width: 100%;background-color: #ccc;display: flex;flex-wrap: wrap;justify-content: space-around;border: 1px solid gold;}
.load_div {width: 400px;height: 300px;border:1px solid red;}
.load_div2 {width: 400px;height: 300px;border:1px solid green;}
</style>
</head>
<body>
<div class="load_div"></div>
<div class="load_div"></div>
<div class="load_div"></div>
<div class="load_div"></div>
<div class="load_div"></div>
<div class="load_div"></div>
<div class="load_div"></div>
<div class="load_div"></div>
<div class="load_div"></div>
</body>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
var totalHeight = $(document).height();//整個文檔高度
var seeHeight = $(window).height();//瀏覽器可視窗口高度
var thisBodyHeight = $(document.body).height();//瀏覽器當前窗口文檔body的高度
var totalBodyHeight = $(document.body).outerHeight(true);//瀏覽器當前窗口文檔body的總高度 包括border padding margin
var thisWidth = $(window).width(); //瀏覽器當前窗口可視區域寬度
var thisDocumentWidth = $(document).width();//瀏覽器當前窗口文檔對象寬度
var thisBodyWidth = $(document.body).width();//瀏覽器當前窗口文檔body的寬度
var totalBodyWidth = $(document.body).outerWidth(true);//瀏覽器當前窗口文檔body的總寬度 包括border padding margin
var scrollTop = $(window).scrollTop();//瀏覽器可視窗口頂端距離網頁頂端的高度(垂直偏移)
//console.log(totalHeight,seeHeight,thisBodyHeight,totalBodyHeight,thisWidth,thisDocumentWidth,thisBodyWidth,totalBodyWidth,scrollTop);
//添加滾動事件
$(window).scroll(function(){
   scrollTop = $(window).scrollTop();
totalHeight = $(document).height();
// console.log(scrollTop,seeHeight,totalHeight)
if(scrollTop+seeHeight+50>totalHeight){
   var htmlText = '<div class="load_div2"></div><div class="load_div2"></div><div class="load_div2"></div>';
$('body').append(htmlText);
}
})
</script>
</html>

相關閱讀
網站頁面重新構寫,正在驗證其它瀏覽器
詳細的百度蜘蛛爬行檢測代碼詮釋
13種樣式檢測QQ是否在線的代碼
網站最近更新緩慢說明
我愛敦煌網
提交按鈕在自定時間內灰色不可用
網頁制作中注意應用HTML標簽的問題
表格增加
共有0條關于《jquery實現下拉加載更多》的評論
發表評論
正在加載評論......
返回頂部發表評論
呢 稱:
表 情:
內 容:
評論內容:不能超過 1000 字,需審核,請自覺遵守互聯網相關政策法規。
驗證碼: 驗證碼 
網友評論聲明,請自覺遵守互聯網相關政策法規。

您發布的評論即表示同意遵守以下條款:
一、不得利用本站危害國家安全、泄露國家秘密,不得侵犯國家、社會、集體和公民的合法權益;
二、不得發布國家法律、法規明令禁止的內容;互相尊重,對自己在本站的言論和行為負責;
三、本站對您所發布內容擁有處置權。

更多信息>>欄目類別選擇
百度小程序開發
微信小程序開發
微信公眾號開發
uni-app
asp函數庫
ASP
DIV+CSS
HTML
python
更多>>同類信息
DW設置之后更好用 DreamweaverCS編輯GB2312與UTF-8文件在代碼視圖中點擊鼠標錯位問題的解決辦法
js指定日期加n天加n月加n年
jquery中動態生成的代碼使用on hover事件時不出現效果
iframe里阻止_blank彈出新窗口的方法
jquery實現下拉加載更多
jquery獲得當前所有input表單數據并進行序列化的各種問題與解決方案serialize與serializeArray的區別分析
更多>>最新添加文章
python里面requests.post返回的res.text還有其它的嗎
aliyun阿里云續費域名優惠口令(注冊、續費都可以使用)
windows7環境下安裝配置jdk
python對微信操作要用到這兩個庫wxpy與itchat
ASP中Utf-8與Gb2312編碼轉換亂碼問題的解決方法頁面編碼聲明
DW設置之后更好用 DreamweaverCS編輯GB2312與UTF-8文件在代碼視圖中點擊鼠標錯位問題的解決辦法
解決國內 github.com 打不開的準確方法
8種Python字符串拼接的方法,你知道幾種
更多>>隨機抽取信息
網站終于在計劃時間內完成了
了解CSS中em單位和px單位的區別
可以用作后臺的超級強的變色表格
IE6在定義DIV最小高度時出現錯誤的解決方法
制作外貿企業英文網站存在的誤區查看與更改方法
實現windows關機效果代碼
91超碰caoporen国产香蕉|亚洲天堂在线免费|国产成人片在线观看|日本午夜免a费看大片中文|香蕉国产在线观看免费