当拖动滚动条时，自动加载内容
</pre><pre name="code" class="javascript">1. 首先计算li的总数
</pre><pre code_snippet_id="683281" snippet_file_name="blog_20150603_5_4812406" name="code" class="javascript">2. 计算每一行显示的li的数量
</pre><pre code_snippet_id="683281" snippet_file_name="blog_20150603_7_6227327" name="code" class="javascript">3. 计算li自身的高度
</pre><pre code_snippet_id="683281" snippet_file_name="blog_20150603_9_8689022" name="code" class="javascript">4. 计算li的margin-bottom高度
</pre><pre code_snippet_id="683281" snippet_file_name="blog_20150603_11_4040658" name="code" class="javascript">///////////要实现的效果，当滚动条向下滚动到快接近底部时，自动加载内容
</pre><pre code_snippet_id="683281" snippet_file_name="blog_20150603_13_9326253" name="code" class="javascript">首先计算滚动条的scrollTop，即距离滚动条顶部的距离,计为scroll_top
</pre><pre code_snippet_id="683281" snippet_file_name="blog_20150603_15_5135237" name="code" class="javascript">其次，计算出接近滚动条底部的距离，计为scroll_height
</pre><pre code_snippet_id="683281" snippet_file_name="blog_20150603_17_420833" name="code" class="javascript">再次，当 <span style="font-family: Arial, Helvetica, sans-serif;">scroll_top > </span><span style="font-family: Arial, Helvetica, sans-serif;">scroll_height 时，自动加载内容,比如通过ajax请求获取数据</span>
<span style="font-family:Arial, Helvetica, sans-serif;"> </span>
<span style="font-family:Arial, Helvetica, sans-serif;">重点就是如何计算出 scroll_height 这个高度</span>
<span style="font-family:Arial, Helvetica, sans-serif;"> </span>
<span style="font-family:Arial, Helvetica, sans-serif;">代码实现如下： </span><div> </div>
</pre><pre code_snippet_id="683281" snippet_file_name="blog_20150603_23_4915199" name="code" class="javascript">
<pre name="code" class="javascript"><!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul id="scroll_ul" current_page="1">
<li><img src="1.jpg" /></li>
<li><img src="1.jpg" /></li>
<li><img src="1.jpg" /></li>
<li><img src="1.jpg" /></li>
<li><img src="1.jpg" /></li>
<li><img src="1.jpg" /></li>
<li><img src="1.jpg" /></li>
<li><img src="1.jpg" /></li>
<li><img src="1.jpg" /></li>
<li><img src="1.jpg" /></li>
<li><img src="1.jpg" /></li>
<li><img src="1.jpg" /></li>
<li><img src="1.jpg" /></li>
<li><img src="1.jpg" /></li>
<li><img src="1.jpg" /></li>
<li><img src="1.jpg" /></li>
<li><img src="1.jpg" /></li>
<li><img src="1.jpg" /></li>
<li><img src="1.jpg" /></li>
<li><img src="1.jpg" /></li>
<li><img src="1.jpg" /></li>
<li><img src="1.jpg" /></li>
<li><img src="1.jpg" /></li>
<li><img src="1.jpg" /></li>
<li><img src="1.jpg" /></li>
<li><img src="1.jpg" /></li>
<li><img src="1.jpg" /></li>
<li><img src="1.jpg" /></li>
<li><img src="1.jpg" /></li>
<li><img src="1.jpg" /></li>
<li><img src="1.jpg" /></li>
<li><img src="1.jpg" /></li>
<li><img src="1.jpg" /></li>
<li><img src="1.jpg" /></li>
<li><img src="1.jpg" /></li>
<li><img src="1.jpg" /></li>
<li><img src="1.jpg" /></li>
<li><img src="1.jpg" /></li>
<li><img src="1.jpg" /></li>
<li><img src="1.jpg" /></li>
<li><img src="1.jpg" /></li>
<li><img src="1.jpg" /></li>
<li><img src="1.jpg" /></li>
</ul>
<style type="text/css">
ul{
width:350px;
height:500px;
list-style-type: none;
overflow-y: scroll;
padding: 8px;
border:1px solid #acacac;
}
ul li{
width:100px;
height:200px;
margin-left: 10px;
float: left;
margin-bottom: 10px;
}
img{
width:100px;
height:200px;
}
</style>
<script type="text/javascript" src="jquery-1.11.3.js"></script>
<script type="text/javascript">
$("#scroll_ul").on("scroll", function(evt){
var ul_height = $(this).height();
var scroll_top = $(this).scrollTop();
var li = $("#scroll_ul li").length;
var li_height = $("#scroll_ul li").eq(0).height();
var li_margin_buttom = $("#scroll_ul li").eq(0).css("margin-bottom").replace("px", '');
var li_list_height = Math.ceil((li-9)/3);
var scroll_height = li_list_height*( parseInt(li_height) + parseInt(li_margin_buttom));
if(scroll_top > scroll_height) {
var page = parseInt( $(this).attr("current_page") );
$(this).attr("current_page", page+1);
$("#scroll_ul").append($("#scroll_ul").children("li").eq(0).clone());
$.ajax({
'url':'',
'type':"post",
'async':true,
'data':{"page":page+1},
'success':function(){
}
});
}
});
</script>
</body>
</html>
时间： 2024-12-23 10:33:16