jquery实现随滚动条滚动而加载数据的功能（瀑布流）

2018-04-03 22:12:32 次阅读稿源：互联网

零七广告

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

<html>  
<head runat="server">  
<title>拉动滚动条加载数据</title>  
<script src="http://www.daimajiayuan.com/templets/skins/js/jquery-1.8.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>

零七网部分新闻及文章转载自互联网，供读者交流和学习，若有涉及作者版权等问题请及时与我们联系，以便更正、删除或按规定办理。感谢所有提供资讯的网站，欢迎各类媒体与零七网进行文章共享合作。

零七广告

零七广告

热点JavaScript

零七广告

广
告

JavaScript

编程开发

jquery实现随滚动条滚动而加载数据的功能（瀑布流）

最新JavaScript

热点JavaScript