页面中代码

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="waterfall.WebForm1" %>
  2.  
  3. <!DOCTYPE html>
  4.  
  5. <html xmlns="http://www.w3.org/1999/xhtml">
  6. <head runat="server">
  7.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  8.     <title></title>
  9.     <link href="css/main.css" rel="stylesheet" />
  10.     <link href="css/reset.css" rel="stylesheet" />
  11.  
  12. </head>
  13. <body>
  14.     <form id="form1" runat="server">
  15.         <div id="container">
  16.             <header>
  17.                 <h1>Wookmark测试</h1>
  18.                 <p>往下拉，就能看到效果</p>
  19.             </header>
  20.             <div id="main" role="main">
  21.                 <ul id="tiles">
  22.                     <li>
  23.                         <img src="data:images/image_1.jpg" width="" height="" alt="">
  24.                         <p>图片描述1</p>
  25.                     </li>
  26.                     <li>
  27.                         <img src="data:images/image_2.jpg" width="" height="" alt="">
  28.                         <p>图片描述2</p>
  29.                     </li>
  30.                     <li>
  31.                         <img src="data:images/image_3.jpg" width="" height="" alt="">
  32.                         <p>图片描述3</p>
  33.                     </li>
  34.                     <li>
  35.                         <img src="data:images/image_1.jpg" width="" height="" alt="">
  36.                         <p>图片描述4</p>
  37.                     </li>
  38.                     <li>
  39.                         <img src="data:images/image_2.jpg" width="" height="" alt="">
  40.                         <p>图片描述5</p>
  41.                     </li>
  42.                     <li>
  43.                         <img src="data:images/image_3.jpg" width="" height="" alt="">
  44.                         <p>图片描述6</p>
  45.                     </li>
  46.                     <li>
  47.                         <img src="data:images/image_1.jpg" width="" height="" alt="">
  48.                         <p>图片描述7</p>
  49.                     </li>
  50.                     <li>
  51.                         <img src="data:images/image_2.jpg" width="" height="" alt="">
  52.                         <p>图片描述8</p>
  53.                     </li>
  54.                     <li>
  55.                         <img src="data:images/image_3.jpg" width="" height="" alt="">
  56.                         <p>图片描述9</p>
  57.                     </li>
  58.                     <li>
  59.                         <img src="data:images/image_1.jpg" width="" height="" alt="">
  60.                         <p>图片描述10</p>
  61.                     </li>
  62.                 </ul>
  63.             </div>
  64.         </div>
  65.         <script src="js/jquery.min.js"></script>
  66.         <script src="js/jquery.imagesloaded.js"></script>
  67.         <script src="js/jquery.wookmark.js"></script>
  68.         <!-- Once the page is loaded, initalize the plug-in. -->
  69.         <script type="text/javascript">
  70.             (function ($) {
  71.                 $('#tiles').imagesLoaded(function () {
  72.                     var handler = null;
  73.  
  74.                     // Prepare layout options.
  75.                     var options = {
  76.                         autoResize: true, // This will auto-update the layout when the browser window is resized.
  77.                         container: $('#main'), // Optional, used for some extra CSS styling
  78.                         offset: , // Optional, the distance between grid items
  79.                         itemWidth:  // Optional, the width of a grid item
  80.                     };
  81.  
  82.                     function applyLayout() {
  83.                         $('#tiles').imagesLoaded(function () {
  84.                             // Destroy the old handler
  85.                             if (handler.wookmarkInstance) {
  86.                                 handler.wookmarkInstance.clear();
  87.                             }
  88.  
  89.                             // Create a new layout handler.
  90.                             handler = $('#tiles li');
  91.                             handler.wookmark(options);
  92.                         });
  93.                     }
  94.  
  95.                     /**
  96.                      * When scrolled all the way to the bottom, add more tiles.
  97.                      */
  98.                     function onScroll(event) {
  99.                         // Check if we're within 100 pixels of the bottom edge of the broser window.
  100.                         var winHeight = window.innerHeight ? window.innerHeight : $(window).height(); // iphone fix
  101.                         var closeToBottom = ($(window).scrollTop() + winHeight > $(document).height() - );
  102.                         //异步请求
  103.                         if (closeToBottom) {
  104.                             $.ajax({
  105.                                 type: 'get',
  106.                                 url: 'LoadImages.ashx',
  107.                                 async: 'true',
  108.                                 data: { getPage: page },
  109.                                 success: function (result) {
  110.                                     $('#tiles').append(result);
  111.                                     applyLayout();
  112.                                     InitImage();
  113.                                     page = page + ;
  114.                                 }
  115.                             });
  116.  
  117.                         }
  118.                     };
  119.  
  120.                     // Capture scroll event.
  121.                     $(window).bind('scroll', onScroll);
  122.  
  123.                     // Call the layout function.
  124.                     handler = $('#tiles li');
  125.                     handler.wookmark(options);
  126.                 });
  127.             })(jQuery);
  128.  
  129.   </script>
  130.         <script type="text/javascript">
  131.             var page = ;
  132.  
  133.             function InitImage() {
  134.  
  135.                 $("#tiles li p").hide();
  136.                 $("#tiles li").hover(function () {
  137.                     $(this).children().last().show();
  138.                 }, function () {
  139.                     $(this).children().last().hide();
  140.                 });
  141.             }
  142.  
  143.             InitImage();
  144.         </script>
  145.     </form>
  146. </body>
  147. </html>

需要配置的一般处理程序，接收ajax请求

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Text;
  5. using System.Web;
  6.  
  7. namespace waterfall
  8. {
  9.     /// <summary>
  10.     /// LoadImages 的摘要说明
  11.     /// </summary>
  12.     public class LoadImages : IHttpHandler
  13.     {
  14.  
  15.         public void ProcessRequest(HttpContext context)
  16.         {
  17.             Random rd = new Random();
  18.  
  19.             int page = int.Parse(context.Request.QueryString["getPage"]);
  20.             StringBuilder sb = new StringBuilder();
  21.             const string html = "<li><img src=\"images/image_@imgIndex@.jpg\" width=\"200\" height=\"300\"><p>@page@</p></li>";
  22.             for (int i = ; i < ; i++)
  23.             {
  24.                 sb.Append(html.Replace("@page@", (page* + i).ToString()).Replace("@imgIndex@",rd.Next(,).ToString()));
  25.             }
  26.             context.Response.Write(sb.ToString());
  27.         }
  28.  
  29.         public bool IsReusable
  30.         {
  31.             get
  32.             {
  33.                 return false;
  34.             }
  35.         }
  36.     }
  37. }

wookmark下载地址：点击这里下载

demo下载：点击这里下载

在asp.net中使用瀑布流，无限加载的更多相关文章

  1. 瀑布流无限加载infinitescroll插件与masonry插件使用

    masonry官网地址http://masonry.desandro.com/,infinitescroll官网地址http://www.infinite-scroll.com/ 无限滚动原理:无限滚 ...

  2. jQuery瀑布流+无限加载图片

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. js实现瀑布流以及加载效果

    一.瀑布流是个啥? 瀑布流,是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部. 最早采用瀑布流布局的网站是Pinteres ...

  4. jQuery8种不同的瀑布流懒加载loading效果

    优化图片加载插件jQuery8种不同的瀑布流懒加载loading效果  在线预览 下载地址 实例代码 <ul class="grid effect-1" id="g ...

  5. asp.net中TreeView的大数据加载速度优化

    由于数据量太大,加载树时间很长,所以进行了优化 前台 .aspx <asp:Panel ID="Panel2" runat="server" Height ...

  6. 基于jquery响应式网站图片无限加载瀑布流布局

    分享一款效果非常酷的jQuery瀑布流布局无限加载图片效果.整个页面采用响应式布局,图片采用jQuery.Lazyload延时加载技术,提升整个页面的加载速度.效果图如下: 在线预览   源码下载 实 ...

  7. jQuery实现无限加载瀑布流特效

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. html中的瀑布流是什么

    html中的瀑布流是什么 一.总结 1.瀑布流: 从左往右排列,哪一列现在的总高度最小,就优先排序把item(单元格)放在这一列.这样排完所有的单元格后,可以保证每一列的总高度都相差不大 2.看效果图 ...

  9. CSS3学习总结——实现瀑布流布局与无限加载图片相册

    首先给大家看一下瀑布流布局与无限加载图片相册效果图: 一.pic1.html页面代码如下: <!DOCTYPE html> <html> <head> <me ...

随机推荐

  1. linux中的信号机制

    概述 Linux信号机制是在应用软件层次上对中断机制的一种模拟,信号提供了一种处理异步事件的方法,例如,终端用户输入中断键(ctrl+c),则会通过信号机制停止一个程序[1]. 这其实就是向那个程序( ...

  2. sparkR介绍及安装

    sparkR介绍及安装 SparkR是AMPLab发布的一个R开发包,为Apache Spark提供了轻量的前端.SparkR提供了Spark中弹性分布式数据集(RDD)的API,用户可以在集群上通过 ...

  3. CentOS重新加载网卡报错 Active connection path: /org/freedesktop/NetworkManager/ActiveConnection/23

    最新文章:Virson's Blog 重新加载网卡时出现的错误如下: [root@vdb1 dev]# service network restart Shutting down interface ...

  4. 第三百九十八节，Django+Xadmin打造上线标准的在线教育平台—生产环境部署CentOS6.5系统环境设置

    第三百九十八节,Django+Xadmin打造上线标准的在线教育平台—生产环境部署CentOS6.5系统环境设置 1.Linux安装配置 注意事项: 虚拟机网卡桥接模式 不要拨VPN 如果,网络怎么都 ...

  5. 使用grep查找字符串

    如下: grep -r 'target string' --exclude='pattern' dir/ 例子: grep -r Debug --exclude='*.js' ./ 查找本目录下除了j ...

  6. Scala学习笔记——类型

    1.Option类型 Option类型可以有两种类型,一种是Some(x),一种是None对象 比如Scala的Map的get方法发现了指定键,返回Some(x),没有发现,返回None对象 2.列表 ...

  7. vim 脚本——插件

    :help usr_41.txt 查看vim默认可添加插件的路径 :set runtimepath? 查看vim系统插件与脚本位置 :echo $VIMRUNTIME :echo $VIM 查看所有插 ...

  8. MySql按字段分组取最大值记录 [此博文包含图片]

      要求:获得按table1_id分组,并且age最大的记录信息,即2.3.5条     方法一: select * from (select * from table2 order by age d ...

  9. nginx js、css、图片 及 一些静态文件中出现 http://upstreamname:port 导致部分网页样式显示不正常

    nginx js.css.图片 及 一些静态文件中出现 http://upstreamname:port 导致部分网页样式显示不正常 http://upstreamname:port/....../. ...

  10. SpringMVC中@RestController的用法

    转自:https://blog.csdn.net/u010412719/article/details/69710480 Spring4之后新加入的注解,原来返回json需要@ResponseBody ...