閑來無事，琢磨著寫點東西。貌似頁面下拉加載數(shù)據(jù)，瀑布流的效果很火，各個網(wǎng)站都能見到各式各樣的展示效果，原理大同小異。于是乎，決定自己寫一寫這個效果，希望能給比我還菜的菜鳥們一點參考價值。
在開始之前，先把實現(xiàn)的基本原理說一下。當夜幕下拉到底部的時候，js可以判斷滾動條的位置，到達底部觸發(fā)js方法，執(zhí)行jquery的Ajax方法，向后臺一般處理程序夜幕ashx文件請求數(shù)據(jù)源，得到json格式的數(shù)據(jù)源。然后，遍歷json數(shù)據(jù)源，拼接一個li標簽，再填充到頁面上去。
首先，我們來做個簡單的html頁面。頁面里需要引入jquery庫，然后用jquery的ajax方法去請求后臺程序，也就是一般處理程序頁面。待會，我會在一般處理程序頁面ashx文件里面寫方法，返回前端頁面所需要的新聞列表數(shù)據(jù)源。數(shù)據(jù)源的格式，我用的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="jquery-1.8.2.js"></script> <script type="text/Javascript"> $(function () { var PageNum = 0; $(window).scroll(function () { //console.log("滾動條到頂部的垂直高度: " + $(document).scrollTop()); //console.log("頁面的文檔高度 ：" + $(document).height()); //console.log('瀏覽器的高度：' + $(window).height()); //console.log('瀏覽器的高度加上滾動條的高度：' + parseFloat($(window).height()) + parseFloat($(window).scrollTop())); var totalheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop());//瀏覽器的高度加上滾動條的高度 if ($(document).height() <= totalheight)//當文檔的高度小于或者等于總的高度的時候，開始動態(tài)加載數(shù)據(jù) { $('#LoadingMsg').css('display', 'block'); ///ajax存在緩存問題，所以這里加個隨機數(shù)，讓每次請求的參數(shù)變化，消除數(shù)據(jù)緩存的問題。 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('沒有更多數(shù)據(jù)了'); $('#LoadingMsg').css('display', 'block'); } else { $("#Listinfo").append("<li>" + item.Num + ".<font color='red'>" + item.Ntitle + "</font></li>");//加載數(shù)據(jù) } }) if (data.length > 0) { PageNum++; } //$('#LoadingMsg').css('display', 'none'); }, error: function (xmlhttpRequest, textStatus, errorThrown) { alert("程序錯誤，錯誤信息：" + errorThrown); } }); } }); }) </script></head><body> <div id="main"> <div id="ListContent"> <ul id="Listinfo"> <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 style="clear: both"></div> <div id="LoadingMsg"> <span>正在加載，請稍后...</span> </div> </div> </div></body></html>然后，來看一下代碼的頁面效果。
接下來，我們要創(chuàng)建數(shù)據(jù)庫，連接數(shù)據(jù)庫，讀取數(shù)據(jù)。這樣做太麻煩了，我直接用自定義的List數(shù)據(jù)來做演示了。我平時習慣為數(shù)據(jù)庫每張表都創(chuàng)建一個實體類，以此隱射數(shù)據(jù)庫的表，字段。這里我們創(chuàng)建一個NewsInfo的實體類，也就是通常的三層架構程序里面的Model里面的類。同時，我們自定義一些數(shù)據(jù)給他，這個作為我們的數(shù)據(jù)源。真實開發(fā)環(huán)境下面，這個都是在DAL里面去連接數(shù)據(jù)庫，讀取數(shù)據(jù)的。我這里只是用作演示，希望你們懂的。我在實體類中定義了一個帶參數(shù)的名為GetListByPn的方法。這個參數(shù)int類型的pn參數(shù)，你可以理解為你下拉頁面的次數(shù)。比如當你第一次拉到頁面底部的時候，這個參數(shù)為1，那我們就讀取前N條數(shù)據(jù)，當你第二次下拉到頁面底部的時候，這個參數(shù)為2，那我們就讀取第N到2N條之間的N條數(shù)據(jù)，這個就是存儲過程分頁的原理。這個方法，我返回了一個類型是NewsInfo的List集合，這就是我們傳遞給前端頁面的數(shù)據(jù)源。
using System;using System.Collections.Generic;using System.Linq;using System.Web;/// <summary>
新聞熱點
疑難解答
