·您现在的位置： 云翼网络 >> 文章中心 >> 网站建设 >> 网站建设开发 >> ASP.NET网站开发 >> ASP.NET仿新浪微博下拉加载更多数据瀑布流效果

【如有意向点此提交需求】关于我们

ASP.NET仿新浪微博下拉加载更多数据瀑布流效果

作者：佚名      ASP.NET网站开发编辑：admin      更新时间：2022-07-23

asp.net仿新浪微博下拉加载更多数据瀑布流效果

　　闲来无事，琢磨着写点东西。貌似页面下拉加载数据，瀑布流的效果很火，各个网站都能见到各式各样的展示效果，原理大同小异。于是乎，决定自己写一写这个效果，希望能给比我还菜的菜鸟们一点参考价值。

　　在开始之前，先把实现的基本原理说一下。当夜幕下拉到底部的时候，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="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)//当文档的高度小于或者等于总的高度的时候，开始动态加载数据                {                    $('#LoadingMsg').css('display', 'block');                    ///ajax存在缓存问题，所以这里加个随机数，让每次请求的参数变化，消除数据缓存的问题。                    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 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>
　　然后，来看一下代码的页面效果。　　接下来，我们要创建数据库，连接数据库，读取数据。这样做太麻烦了，我直接用自定义的List数据来做演示了。我平时习惯为数据库每张表都创建一个实体类，以此隐射数据库的表，字段。这里我们创建一个NewsInfo的实体类，也就是通常的三层架构程序里面的Model里面的类。同时，我们自定义一些数据给他，这个作为我们的数据源。真实开发环境下面，这个都是在DAL里面去连接数据库，读取数据的。我这里只是用作演示，希望你们懂的。我在实体类中定义了一个带参数的名为GetListByPn的方法。这个参数int类型的pn参数，你可以理解为你下拉页面的次数。比如当你第一次拉到页面底部的时候，这个参数为1，那我们就读取前N条数据，当你第二次下拉到页面底部的时候，这个参数为2，那我们就读取第N到2N条之间的N条数据，这个就是存储过程分页的原理。这个方法，我返回了一个类型是NewsInfo的List集合，这就是我们传递给前端页面的数据源。

　　

using System;using System.Collections.Generic;using System.Linq;using System.Web;/// <summary>