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

  在开始之前,先把实现的基本原理说一下。当夜幕下拉到底部的时候,js可以判断滚动条的位置,到达底部触发js方法,执行jquery的ajax方法,向后台一般处理程序夜幕ashx文件请求数据源,得到json格式的数据源。然后,遍历json数据源,拼接一个li标签,再填充到页面上去。

  首先,我们来做个简单的html页面。页面里需要引入jquery库,然后用jquery的ajax方法去请求后台程序,也就是一般处理程序页面。待会,我会在一般处理程序页面ashx文件里面写方法,返回前端页面所需要的新闻列表数据源。数据源的格式,我用的json格式。

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>仿新浪微博下拉页面底部加载更多</title>
  6. <style type="text/css">
  7. #main {
  8. margin: 10px auto;
  9. width: 990px;
  10. }
  11.  
  12. #ListContent {
  13. color: white;
  14. position: relative;
  15. }
  16.  
  17. #Listinfo {
  18. width: 850px;
  19. float: left;
  20. background-color: #071A37;
  21. position: relative;
  22. padding-bottom: 50px;
  23. }
  24.  
  25. #Listinfo li {
  26. list-style: none;
  27. width: 800px;
  28. height: 40px;
  29. line-height: 40px;
  30. text-align: center;
  31. float: left;
  32. }
  33.  
  34. #LoadingMsg {
  35. display: none;
  36. margin: 0 0;
  37. padding: 0 0;
  38. height: 25px;
  39. line-height: 25px;
  40. width: 800px;
  41. position: absolute;
  42. left: 48px;
  43. text-align: center;
  44. vertical-align: middle;
  45. bottom: 20px;
  46. }
  47.  
  48. #LoadingMsg span {
  49. margin: 0 0;
  50. padding: 0 0;
  51. background: url(loading.gif) left center no-repeat;
  52. padding-left: 30px;
  53. height: 25px;
  54. line-height: 25px;
  55. }
  56. </style>
  57. <script type="text/javascript" src="jquery-1.8.2.js"></script>
  58. <script type="text/javascript">
  59. $(function () {
  60. var PageNum = 0;
  61. $(window).scroll(function () {
  62. //console.log("滚动条到顶部的垂直高度: " + $(document).scrollTop());
  63. //console.log("页面的文档高度 :" + $(document).height());
  64. //console.log('浏览器的高度:' + $(window).height());
  65. //console.log('浏览器的高度加上滚动条的高度:' + parseFloat($(window).height()) + parseFloat($(window).scrollTop()));
  66.  
  67. var totalheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop());//浏览器的高度加上滚动条的高度
  68. if ($(document).height() <= totalheight)//当文档的高度小于或者等于总的高度的时候,开始动态加载数据
  69. {
  70. $('#LoadingMsg').css('display', 'block');
  71. ///ajax存在缓存问题,所以这里加个随机数,让每次请求的参数变化,消除数据缓存的问题。
  72. var randcode = 1 + Math.round(Math.random() * 9999);
  73. $.ajax({
  74. type: "Get",
  75. url: "Handler.ashx",
  76. dataType: "json",
  77. data: "PageNum=" + PageNum + "&randcode" + randcode,
  78. success: function (data) {
  79. $.each(data, function (i, item) {
  80. if (item.Num == '-1') {
  81. $('#LoadingMsg').html('没有更多数据了');
  82. $('#LoadingMsg').css('display', 'block');
  83. }
  84. else {
  85. $("#Listinfo").append("<li>" + item.Num + ".<font color='red'>" + item.Ntitle + "</font></li>");//加载数据
  86. }
  87. })
  88. if (data.length > 0) {
  89. PageNum++;
  90. }
  91. //$('#LoadingMsg').css('display', 'none');
  92. },
  93. error: function (XMLHttpRequest, textStatus, errorThrown) {
  94. alert("程序错误,错误信息:" + errorThrown);
  95. }
  96. });
  97. }
  98. });
  99. })
  100. </script>
  101. </head>
  102. <body>
  103. <div id="main">
  104. <div id="ListContent">
  105. <ul id="Listinfo">
  106. <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的新闻标题</li>
  107. <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的新闻标题</li>
  108. <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的新闻标题</li>
  109. <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的新闻标题</li>
  110. <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的新闻标题</li>
  111. <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的新闻标题</li>
  112. <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的新闻标题</li>
  113. <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的新闻标题</li>
  114. <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的新闻标题</li>
  115. <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的新闻标题</li>
  116. <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的新闻标题</li>
  117. <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的新闻标题</li>
  118. <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的新闻标题</li>
  119. <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的新闻标题</li>
  120. <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的新闻标题</li>
  121. <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的新闻标题</li>
  122. <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的新闻标题</li>
  123. <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的新闻标题</li>
  124. <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的新闻标题</li>
  125. <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的新闻标题</li>
  126. <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的新闻标题</li>
  127. <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的新闻标题</li>
  128. <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的新闻标题</li>
  129. <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的新闻标题</li>
  130. <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的新闻标题</li>
  131. <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的新闻标题</li>
  132. <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的新闻标题</li>
  133. <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的新闻标题</li>
  134. <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的新闻标题</li>
  135. <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的新闻标题</li>
  136. <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的新闻标题</li>
  137. <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的新闻标题</li>
  138. <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的新闻标题</li>
  139. <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的新闻标题</li>
  140. </ul>
  141. <div style="clear: both"></div>
  142. <div id="LoadingMsg">
  143. <span>正在加载,请稍后...</span>
  144. </div>
  145. </div>
  146. </div>
  147. </body>
  148. </html>
  然后,来看一下代码的页面效果。
  接下来,我们要创建数据库,连接数据库,读取数据。这样做太麻烦了,我直接用自定义的List数据来做演示了。我平时习惯为数据库每张表都创建一个实体类,以此隐射数据库的表,字段。这里我们创建一个NewsInfo的实体类,也就是通常的三层架构程序里面的Model里面的类。同时,我们自定义一些数据给他,这个作为我们的数据源。真实开发环境下面,这个都是在DAL里面去连接数据库,读取数据的。我这里只是用作演示,希望你们懂的。我在实体类中定义了一个带参数的名为GetListByPn的方法。这个参数int类型的pn参数,你可以理解为你下拉页面的次数。比如当你第一次拉到页面底部的时候,这个参数为1,那我们就读取前N条数据,当你第二次下拉到页面底部的时候,这个参数为2,那我们就读取第N到2N条之间的N条数据,这个就是存储过程分页的原理。这个方法,我返回了一个类型是NewsInfo的List集合,这就是我们传递给前端页面的数据源。

  

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5.  
  6. /// <summary>
  7. /// NewsInfo 的摘要说明
  8. /// </summary>
  9. public class NewsInfo
  10. {
  11. public NewsInfo()
  12. {
  13. //
  14. // TODO: 在此处添加构造函数逻辑
  15. //
  16. }
  17. public int Num { get; set; }
  18. public string Ntitle { get; set; }
  19.  
  20. /// <summary>
  21. /// 根据页码数获取数据
  22. /// </summary>
  23. /// <param name="pn"></param>
  24. /// <returns></returns>
  25. public static List<NewsInfo> GetListByPn(int pn)
  26. {
  27. List<NewsInfo> NewList = new List<NewsInfo>();
  28. NewList.Add(new NewsInfo { Num = 0, Ntitle = "华米科技宣布3500万美元B轮融资 估值超3亿美元" });
  29. NewList.Add(new NewsInfo { Num = 1, Ntitle = "淘汰CAPTCHA!谷歌推改良版CAPTCHA验证" });
  30. NewList.Add(new NewsInfo { Num = 2, Ntitle = "朋友圈做微商为何会如此遭人恨?买假货 还刷屏" });
  31. NewList.Add(new NewsInfo { Num = 3, Ntitle = "社交化新闻聚合网站的未来发展趋势" });
  32. NewList.Add(new NewsInfo { Num = 4, Ntitle = "雷军未来3~5年间将砸10亿美元投云计算" });
  33. NewList.Add(new NewsInfo { Num = 5, Ntitle = "Oculus CEO:我是如何邂逅扎克伯格的" });
  34. NewList.Add(new NewsInfo { Num = 6, Ntitle = "实战:股权众筹行业融资流程介绍" });
  35. NewList.Add(new NewsInfo { Num = 7, Ntitle = "理财范应邀加入中关村互联网金融行业协会" });
  36. NewList.Add(new NewsInfo { Num = 8, Ntitle = "P2P平台的“羊毛”还能继续撸吗?沉迷易受伤" });
  37. NewList.Add(new NewsInfo { Num = 9, Ntitle = "美副国务卿:美中都是网络攻击的受害者" });
  38. NewList.Add(new NewsInfo { Num = 10, Ntitle = "谷歌将推儿童版YouTube和Chrome浏览器" });
  39. NewList.Add(new NewsInfo { Num = 11, Ntitle = "高盛“免费”为Uber打车融资数亿美元" });
  40. NewList.Add(new NewsInfo { Num = 12, Ntitle = "观察:支付宝A股挂牌还需迈过几道槛" });
  41. NewList.Add(new NewsInfo { Num = 13, Ntitle = "优酷土豆刘德乐:多屏合一延伸视听产业新边界" });
  42. NewList.Add(new NewsInfo { Num = 14, Ntitle = "高盛“免费”为Uber打车融资数亿美元" });
  43. NewList.Add(new NewsInfo { Num = 15, Ntitle = "趣分期获1亿美金C轮融资 发力白领人群" });
  44. NewList.Add(new NewsInfo { Num = 16, Ntitle = "优酷土豆刘德乐:多屏合一延伸视听产业新边界" });
  45. NewList.Add(new NewsInfo { Num = 17, Ntitle = "社交化新闻聚合网站的未来发展趋势" });
  46. NewList.Add(new NewsInfo { Num = 18, Ntitle = "天天网董事长鞠传国:美妆平台还有上市空间" });
  47. NewList.Add(new NewsInfo { Num = 19, Ntitle = "百车宝 徐小平汽车领域投资第一单" });
  48. NewList.Add(new NewsInfo { Num = 20, Ntitle = "美副国务卿:美中都是网络攻击的受害者" });
  49. NewList.Add(new NewsInfo { Num = 21, Ntitle = "视频网站继续发力硬件 盒子依然是香饽饽" });
  50. NewList.Add(new NewsInfo { Num = 22, Ntitle = "谷歌推出网络机器人识别工具reCaptchas" });
  51. NewList.Add(new NewsInfo { Num = 23, Ntitle = "理财范应邀加入中关村互联网金融行业协会" });
  52. NewList.Add(new NewsInfo { Num = 24, Ntitle = "《江南Style》视频播放量爆表:谷歌被迫升级" });
  53. NewList.Add(new NewsInfo { Num = 25, Ntitle = "观察:支付宝A股挂牌还需迈过几道槛" });
  54. NewList.Add(new NewsInfo { Num = 26, Ntitle = "陌陌下周赴美上市 傍上阿里巴巴逆袭微信" });
  55. NewList.Add(new NewsInfo { Num = 27, Ntitle = "途牛同程封杀战升级:驴妈妈半路联手途牛" });
  56. NewList.Add(new NewsInfo { Num = 28, Ntitle = "互联网时代更要尊重原创和梦想" });
  57. NewList.Add(new NewsInfo { Num = 29, Ntitle = "Skype前员工推出移动即时通讯应用Wire" });
  58. NewList.Add(new NewsInfo { Num = 30, Ntitle = "盘点:2014年Q3美国主要互联网企业财报汇总" });
  59. NewList.Add(new NewsInfo { Num = 31, Ntitle = "盘点:西方社交媒体与社会资本研究综述" });
  60. NewList.Add(new NewsInfo { Num = 32, Ntitle = "陌陌将在IPO同时向阿里巴巴与58同城增发新股" });
  61. NewList.Add(new NewsInfo { Num = 33, Ntitle = "从O2O闭环到推广通 大众点评移动广告创新不断" });
  62. NewList.Add(new NewsInfo { Num = 34, Ntitle = "佛山豪车相撞 玛莎拉蒂冲上花基保时捷" });
  63. NewList.Add(new NewsInfo { Num = 35, Ntitle = "一汽马自达高效保养服务提升品牌价值" });
  64. NewList.Add(new NewsInfo { Num = 36, Ntitle = "一汽大众速腾后悬架断裂事件持续 案例信息采集中" });
  65. NewList.Add(new NewsInfo { Num = 37, Ntitle = "居民自发组织“车管会” 保障权益化解停车难" });
  66. NewList.Add(new NewsInfo { Num = 38, Ntitle = "新能源车:强化充电设施准入门槛" });
  67. NewList.Add(new NewsInfo { Num = 39, Ntitle = "胡润豪车报告引争议 中国汽车文化尚未成熟" });
  68. NewList.Add(new NewsInfo { Num = 40, Ntitle = "725名速腾车主起诉一汽大众 厂家举行袖珍沟通会" });
  69. NewList.Add(new NewsInfo { Num = 41, Ntitle = "特斯拉PK比亚迪 谁是新能源车大赢家?" });
  70. NewList.Add(new NewsInfo { Num = 42, Ntitle = "深圳本田飞度享0.3万优惠送5000大礼包" });
  71. NewList.Add(new NewsInfo { Num = 43, Ntitle = "国家放开电动车资质:谁将站上“风口”" });
  72. NewList.Add(new NewsInfo { Num = 44, Ntitle = "特斯拉能否打破中国式电动车发展困境?" });
  73. NewList.Add(new NewsInfo { Num = 45, Ntitle = "人民日报各抒己见:插电车为何不插电" });
  74. NewList.Add(new NewsInfo { Num = 46, Ntitle = "评论:“停车场乱象”再证多头管理之弊" });
  75. NewList.Add(new NewsInfo { Num = 47, Ntitle = "时事图说:停车费给了谁" });
  76. NewList.Add(new NewsInfo { Num = 48, Ntitle = "评论:停车收费之乱不仅在于去向成谜" });
  77. NewList.Add(new NewsInfo { Num = 49, Ntitle = "评论:“巨额停车费”到底去哪儿了?" });
  78. NewList.Add(new NewsInfo { Num = 50, Ntitle = "一汽轿车召回部分奔腾B50轿车" });
  79. NewList.Add(new NewsInfo { Num = 51, Ntitle = "我国进口车月均超11万辆 SUV是绝对主力车型" });
  80. NewList.Add(new NewsInfo { Num = 52, Ntitle = "MPV 50%增速抢眼 家用化趋势拉动商用车企跨界" });
  81. NewList.Add(new NewsInfo { Num = 53, Ntitle = "别克将推全新敞篷车型 或命名\"Velite\"" });
  82. NewList.Add(new NewsInfo { Num = 54, Ntitle = "[深圳]本田锋范综合优惠2.6万元现车充足" });
  83. NewList.Add(new NewsInfo { Num = 55, Ntitle = "业内人士:汽车电商不会牺牲经销商利益" });
  84. NewList.Add(new NewsInfo { Num = 56, Ntitle = "11月经销商库存指数再高企" });
  85. NewList.Add(new NewsInfo { Num = 57, Ntitle = "整车企业牵手租车公司 全产业链合作挖掘消费增长.." });
  86. NewList.Add(new NewsInfo { Num = 58, Ntitle = "用车小贴士:延长爱车寿命10妙招" });
  87. NewList.Add(new NewsInfo { Num = 59, Ntitle = "温暖冬日 关怀延续昌河汽车续温暖传奇" });
  88. NewList.Add(new NewsInfo { Num = 60, Ntitle = "业主与业委会为何“有仇”?法规监管存空白" });
  89. NewList.Add(new NewsInfo { Num = 61, Ntitle = "财苑访谈:降息利好房地产 一线城市房价仍然看涨" });
  90. NewList.Add(new NewsInfo { Num = 62, Ntitle = "王中丙在2014中国海洋经济博览会论坛上发表主旨.." });
  91. NewList.Add(new NewsInfo { Num = 63, Ntitle = "地板同质化需要业内企业共同作用" });
  92. NewList.Add(new NewsInfo { Num = 64, Ntitle = "房地产永久产权成为现实后的9大猜想,你懂的" });
  93. NewList.Add(new NewsInfo { Num = 65, Ntitle = "世茂媒体行:世茂是如何将擅长的别墅做到了极致" });
  94. NewList.Add(new NewsInfo { Num = 66, Ntitle = "评论:小蛮腰巨亏 买单的是你我" });
  95. NewList.Add(new NewsInfo { Num = 67, Ntitle = "“房屋永久产权“引发热议 “老房子“反而更卖座" });
  96. NewList.Add(new NewsInfo { Num = 68, Ntitle = "电器起火为何不能用水浇" });
  97. NewList.Add(new NewsInfo { Num = 69, Ntitle = "贾康:房地产税立法将迎实质性安排" });
  98. NewList.Add(new NewsInfo { Num = 70, Ntitle = "公交减车减趟 廓清谣言更要读懂民心【长城时评】" });
  99. NewList.Add(new NewsInfo { Num = 71, Ntitle = "评论:谁解“亮化工程画楼”的风情?" });
  100. //这里是Linq to List的查询语句,不懂的话,百度一下相关的知识吧。如果你不懂也没事,你可以用数据库做数据源,通过ADO五大对象去操作或者是更简单的SqlHelper.cs这种数据库操作类去读取指定的数据。
  101. List<NewsInfo> ListQuery = (from n in NewList where (n.Num >= 10 * pn && n.Num < 10 * (pn + 1)) select n).ToList();
  102. return ListQuery;
  103. }
  104. }

  现在,我们数据源已经有了,但是我们还没有把数据源返回给前端页面。怎么返回呢?这里用一般处理程序去做,就是后缀名为ashx的文件。接着,我们新建一个一般处理程序页面。在里面接收前端页面传递过来的参数pn,就是刚才说到的你下拉页面的次数。然后把List数据源反序列化为Json字符串,返回给前端页面。这里我们需要定义一个方法去将List结构的数据反序列化为Json格式的字符串。这个方法,我也是在百度上找的。而且,我在返回数据源给前端页面时,让线程暂停了5秒。因为数据量比较少啊,一秒钟都不需要就能加载出这10条数据来,但是你们做的时候可别写这个暂停,这是说给某些“照抄党”的,你懂了,就无视吧。  

  1. <%@ WebHandler Language="C#" Class="Handler" %>
  2.  
  3. using System;
  4. using System.Web;
  5. using System.Collections.Generic;
  6. using System.Threading;
  7. using System.Runtime.Serialization.Json;
  8. using System.IO;
  9. using System.Text;
  10.  
  11. public class Handler : IHttpHandler
  12. {
  13. public void ProcessRequest(HttpContext context)
  14. {
  15. context.Response.ContentType = "text/plain";
  16. int pn = 0;
  17. if (context.Request.QueryString["PageNum"] != null)
  18. {
  19. if (context.Request.QueryString["PageNum"].ToString().Trim() != string.Empty)
  20. {
  21. if (int.TryParse(context.Request.QueryString["PageNum"].ToString().Trim(), out pn))
  22. {
  23. pn = int.Parse(context.Request.QueryString["PageNum"].ToString().Trim());
  24. }
  25. }
  26. }
  27. List<NewsInfo> ListQuery = NewsInfo.GetListByPn(pn);
  28. string ResultJson = "[{\"Num\":-1,\"Ntitle\":\"暂无数据\"}]";
  29. if (ListQuery.Count > 1)
  30. {
  31. ResultJson = Obj2Json<List<NewsInfo>>(ListQuery);
  32. }
  33. Thread.Sleep(5000);//因为数据量比较少,这里线程暂停5秒,让页面出现数据加载等待的效果
  34. context.Response.Write(ResultJson);
  35. }
  36.  
  37. /// <summary>
  38. /// List转Json
  39. /// </summary>
  40. /// <typeparam name="T"></typeparam>
  41. /// <param name="t"></param>
  42. /// <returns></returns>
  43. public static string Obj2Json<T>(T t)
  44. {
  45. try
  46. {
  47. DataContractJsonSerializer serializer = new DataContractJsonSerializer(t.GetType());
  48. using (MemoryStream ms = new MemoryStream())
  49. {
  50. serializer.WriteObject(ms, t);
  51. return Encoding.UTF8.GetString(ms.ToArray());
  52. }
  53. }
  54. catch
  55. {
  56. return null;
  57. }
  58. }
  59.  
  60. public bool IsReusable
  61. {
  62. get
  63. {
  64. return false;
  65. }
  66. }
  67. }

  代码就是这些了,现在运行看一下页面的效果如何。

 

  好了,这个简单的下拉加载更多数据的效果就算是做出来了。虽然没有新浪微博那种的高大上,但是基本可以应付日常需要的效果。最重要的是,通过这个,让大家明白基本原理吧。最后,附上程序源码

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

  1. html ajax请求 php 下拉 加载更多数据 (也可点击按钮加载更多)

    <input type="hidden" class="total_num" id="total" value="{$tot ...

  2. iscroll.js实现上拉刷新,下拉加载更多,应用技巧项目实战

    上拉刷新,下拉加载更多...仿原生的效果----iscroll是一款做滚动效果的插件,具体介绍我就不废话,看官方文档,我只写下我项目开发的一些用到的用法: (如果不好使,调试你的css,想必是个很蛋疼 ...

  3. Windows Phone 8.1开发:如何让ListView下拉加载更多?

    Windows Phone 8.1开发中使用ListView作为数据呈现载体时,经常需要一个下拉(拇指向上滑动)加载更多的交互操作.如何完成这一操作呢?下面为您阐述. 思路是这样的: 1.在ListV ...

  4. jquery实现下拉加载更多

    下拉加载更多这种原理很容易想明白,但是不自己写一个简单的,老是不踏实,获取什么高度再哪里获取之类的.于是自己简单写了个,就是页面上有几个div,然后当滚动条拉到某个位置的时候,再继续加载div.顺便又 ...

  5. 下拉加载更多DEMO(js实现)

    项目的一个前端页面展示已购买商品时,要求能下拉加载更多.花了点时间研究这个功能,以前没做过. 首先需要给div加scroll事件,监听滚动条滚动动作.那何时触发加载动作呢?当滚动条滚到底的时候.如何判 ...

  6. dropload.js下拉加载更多

    项目中有用到下拉加载更多的地方,去网上找了一个插件,地址:http://ons.me/526.html总体还是不错的,可能自己不是特别了解这个插件,做项目时,也是遇到了无数问题.项目中要用的是两个ta ...

  7. H5页面下拉加载更多(实用版)

    近期在做一个H5网站,需要下拉加载更多产品列表的功能.百度搜索了好久,什么说法都有,什么插件都有.   醉了.基本上每一个能直接拿来用的. 最后发现: 1.dropload.js 插件  还可以,但是 ...

  8. JQ下拉加载更多

    <!DOCTYPE=html> <html> <head> <script src="jquery-1.4.2.min.js" type= ...

  9. 微信小程序实现上拉和下拉加载更多

    在上一篇文章中,我们知道了使用 scroll-view 可以实现上拉加载更多,但是由于 scroll-view 的限制,它无法实现下拉加载更多,这篇文章我们使用 view 组件来实现 上拉和下拉加载更 ...

随机推荐

  1. N1必备外来语

    201412: キャリア: ノルマ:(normal)定额,劳动基本定额. チーフ: コスト: バンド:[英] band;皮带,腰带:吹奏乐团,轻音乐乐团(演奏者の一団.楽団.楽隊):营居群 [2014 ...

  2. MVC折线图应用

    后台 获取值并转换成json数据存到实体里面,然后前台输出 HighchartsModels model = new HighchartsModels(); model.DataDicJson = J ...

  3. ORA-03113 通信通道的文件结尾(ORA-19804 ORA-16038-归档空间满的处理方法)

    1.数据库启动报错SQL> startupORACLE 例程已经启动. Total System Global Area 1887350784 bytesFixed Size 2176848 b ...

  4. 【最大流之EdmondsKarp算法】【HDU1532】模板题

    题意:裸的最大流,什么是最大流,参考别的博客 运用复杂度最高的EK算法 O(M*N),模板来自紫书 #include <cstdio> #include <cstdlib> # ...

  5. chrome插件 postman 可以调用restful服务

    chrome插件 postman 可以调用restful服务

  6. zTouch-移动端触屏开发利器(zepto touch扩展)

    * Zepto.js v1.0.1 touch extend (Zepto.js v1.0.1 的swipe touch扩展)js-处理手机移动端web触屏手势动作. Zepto.js v1.0.1版 ...

  7. SQL查询练习题目

    SQL查询练习题目 设有一数据库,包括四个表:学生表(Student).课程表(Course).成绩表(Score)以及教师信息表(Teacher).四个表的结构分别如表1-1的表(一)~表(四)所示 ...

  8. L9-2.安装mysql数据库

    二.安装mysql 1.检查是否安装了mysql 2.安装cmake 输入gmake: make install 安装依赖的软件包: 新建用户权限等: 解压 安装 安装: 安装成功. 安装后调整: v ...

  9. 【转载】Java线程面试题 Top 50

    Java线程面试题 Top 50 2014/08/21 | 分类: 基础技术 | 4 条评论 | 标签: 多线程, 面试题 分享到:140 本文由 ImportNew - 李 广 翻译自 javare ...

  10. FreeRTOS 中断优先级嵌套错误引发HardFault异常解决

          最近在使用FreeRTOS的时候,突然发现程序在运行了几分钟之后所有的任务都不再调用了,只有几个中断能正常使用,看来是系统挂掉了,连续测试了几次想找出问题,可是这个真的有点不知所措.   ...