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

jquery實現下拉加載更多

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





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

代碼如下:
<!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>

相關閱讀
經典的仿藍色理想TAB橫向下拉菜單效果
通過設置iis的進程池讓網站的并發數,性能提升幾個檔次
利用javascript鼠標經過表格,行與列變色
在table中tr的display:block在firefox下顯示布局錯亂問題
鼠標放在表格區域內,當前格的一整行和一整列變色
微信公眾號生成帶參數的二維碼asp源碼下載
旅行社手機網站模板6
利用javascript簡短功能就可以檢查form表單中的元素是否已經填寫
共有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字符串拼接的方法,你知道幾種
更多>>隨機抽取信息
利用DIV+CSS做的柱狀圖(3)
仿淘寶首頁商品分類列表效果
對于轉換的不確定數數用ubound進行下限處理
asp正則表達式 替換HTML源文件里的鏈接地址
對MD5加密方式使用者的建議
asp利用正則檢查手機端的瀏覽器標識來確定是否是手機訪問 如果是手機訪問就使用手機模板
日韩gv国产gv欧美旡码|伊人久久大香线AV五月天|亚洲精品无码永久在线|亚洲第一页自拍1414