闲来无事，琢磨着写点东西。貌似页面下拉加载数据，瀑布流的效果很火，各个网站都能见到各式各样的展示效果，原理大同小异。于是乎，决定自己写一写这个效果，希望能给比我还菜的菜鸟们一点参考价值。
在开始之前，先把实现的基本原理说一下。当夜幕下拉到底部的时候，js可以判断滚动条的位置，到达底部触发js方法，执行jquery的ajax方法，向后台一般处理程序夜幕ashx文件请求数据源，得到json格式的数据源。然后，遍历json数据源，拼接一个li标签，再填充到页面上去。
首先，我们来做个简单的html页面。页面里需要引入jquery库，然后用jquery的ajax方法去请求后台程序，也就是一般处理程序页面。待会，我会在一般处理程序页面ashx文件里面写方法，返回前端页面所需要的新闻列表数据源。数据源的格式，我用的json格式。
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>仿新浪微博下拉页面底部加载更多</title> <style type="text/css"> #main { margin: 10px auto; width: 990px; } #ListContent { color: white; position: relative; } #Listinfo { width: 850px; float: left; background-color: #071A37; position: relative; padding-bottom: 50px; } #Listinfo li { list-style: none; width: 800px; height: 40px; line-height: 40px; text-align: center; float: left; } #LoadingMsg { display: none; margin: 0 0; padding: 0 0; height: 25px; line-height: 25px; width: 800px; position: absolute; left: 48px; text-align: center; vertical-align: middle; bottom: 20px; } #LoadingMsg span { margin: 0 0; padding: 0 0; background: url(loading.gif) left center no-repeat; padding-left: 30px; height: 25px; line-height: 25px; } </style> <script type="text/javascript" src="https://www.jb51.net/jquery-1.8.2.js"></script> <script type="text/javascript"> $(function () { var PageNum = 0; $(window).scroll(function () { var totalheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop());//浏览器的高度加上滚动条的高度 if ($(document).height() <= totalheight)//当文档的高度小于或者等于总的高度的时候，开始动态加载数据 { $('#LoadingMsg').css('display', 'block'); var randcode = 1 + Math.round(Math.random() * 9999); $.ajax({ type: "Get", url: "Handler.ashx", dataType: "json", data: "PageNum=" + PageNum + "&randcode" + randcode, success: function (data) { $.each(data, function (i, item) { if (item.Num == '-1') { $('#LoadingMsg').html('没有更多数据了'); $('#LoadingMsg').css('display', 'block'); } else { $("#Listinfo").append("<li>" + item.Num + ".<font color='red'>" + item.Ntitle + "</font></li>");//加载数据 } }) if (data.length > 0) { PageNum++; } //$('#LoadingMsg').css('display', 'none'); }, error: function (XMLHttpRequest, textStatus, errorThrown) { alert("程序错误，错误信息：" + errorThrown); } }); } }); }) </script> </head> <body> <div> <div> <ul> <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很的新闻标题</li> <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很的新闻标题</li> <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很的新闻标题</li> <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很的新闻标题</li> <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很的新闻标题</li> <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很的新闻标题</li> <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很的新闻标题</li> <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很的新闻标题</li> <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很的新闻标题</li> <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很的新闻标题</li> <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很的新闻标题</li> <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很的新闻标题</li> <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很的新闻标题</li> <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很的新闻标题</li> <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很的新闻标题</li> <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很的新闻标题</li> <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很的新闻标题</li> <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很的新闻标题</li> <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很的新闻标题</li> <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很的新闻标题</li> <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很的新闻标题</li> <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很的新闻标题</li> <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很的新闻标题</li> <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很的新闻标题</li> <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很的新闻标题</li> <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很的新闻标题</li> <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很的新闻标题</li> <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很的新闻标题</li> <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很的新闻标题</li> <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很的新闻标题</li> <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很的新闻标题</li> <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很的新闻标题</li> <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很的新闻标题</li> <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很的新闻标题</li> </ul> <div></div> <div> <span>正在加载，请稍后...</span> </div> </div> </div> </body> </html>
