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

jquery實現下拉加載更多

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





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

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

相關閱讀
uni-app基礎知識列表渲染
洪江市道德模范評選 - 網絡投票
asp隨機顯示字符長度與類型(可隨機顯示數字、小寫字母、大寫字母,可以做為隨機密碼使用)
用GetString來提高ASP的速度
uni-app實現tab選項卡
一個非常不錯的程序編輯工具--PSPad editor
頁面文字變色、變大、還原
利用DIV+CSS制作浮動廣告
共有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的區別分析
更多>>最新添加文章
在Android、iOS、Windows、MacOS中微信小程序的文件存放路徑
python通過代碼修改pip下載源讓下載庫飛起
python里面requests.post返回的res.text還有其它的嗎
aliyun阿里云續費域名優惠口令(注冊、續費都可以使用)
windows7環境下安裝配置jdk
python對微信操作要用到這兩個庫wxpy與itchat
ASP中Utf-8與Gb2312編碼轉換亂碼問題的解決方法頁面編碼聲明
DW設置之后更好用 DreamweaverCS編輯GB2312與UTF-8文件在代碼視圖中點擊鼠標錯位問題的解決辦法
更多>>隨機抽取信息
網上頁面java圖片循環滾動特效
微信小程序-接入廣告
超級實用且不花哨的js代碼大全( 1 )
旅行社網站模板默認風格2
格式化金錢如果為0增加兩個小數點
吉林省文化國際旅行社
日韩gv国产gv欧美旡码|伊人久久大香线AV五月天|亚洲精品无码永久在线|亚洲第一页自拍1414