当拖动滚动条时,自动加载内容
</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>
原文地址:http://blog.csdn.net/free_program_1314/article/details/46350761