jquery实现随滚动条滚动而加载数据的功能

前端APP 投稿 9300 1 评论

jquery实现随滚动条滚动而加载数据的功能

jquery实现随滚动条滚动而加载数据的功能,目前比较流行的瀑布流就是这种实现形式,具体代码以及使用方法如下:


<html> 
<head runat="server"> 
<title>拉动滚动条加载数据</title> 
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(function ( { 
var i = 4;$(window.bind("scroll", function (event 
{ 
//滚动条到网页头部的 高度,兼容ie,ff,chrome 
var top = document.documentElement.scrollTop + document.body.scrollTop; 
//网页的高度 
var textheight = $(document.height(; 
// 网页高度-top-当前窗口高度 
if (textheight - top - $(window.height( <= 100 { if (i >= 100 { return; 
//控制最大只能加载到100 
} 
$('#div1'.css("height", $(document.height( + 100;i++; 
//可以根据实际情况,获取动态数据加载 到 div1中 
$('<div>' + i + '</div>'.appendTo($('#div1'; 
} 
}; 
} 
</script> 
<style> 
#div1 div 
{ 
font-size: 100px; 
background: #ccc; 
margin-top: 5px; 
} 
</style> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div style="height: 1000px;" id="div1"> 
<div> 
</div> 
<div> 
</div> 
<div> 
</div> 
<div> 
</div> 
</div> 
</form> 
</body> 
</html>

编程笔记 » jquery实现随滚动条滚动而加载数据的功能

赞同 (40) or 分享 (0)
游客 发表我的评论   换个身份
取消评论

表情
(1)个小伙伴在吐槽
  1. 给人以启示和思考。
    忧郁的恶魔 2023-10-14 14:30 (2年前) 回复