页面中代码

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="waterfall.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <link href="css/main.css" rel="stylesheet" />

    <link href="css/reset.css" rel="stylesheet" />

</head>

<body>

    <form id="form1" runat="server">

        <div id="container">

            <header>

                <h1>Wookmark测试</h1>

                <p>往下拉，就能看到效果</p>

            </header>

            <div id="main" role="main">

                <ul id="tiles">

                    <li>

                        <img src="data:images/image_1.jpg" width="" height="" alt="">

                        <p>图片描述1</p>

                    </li>

                    <li>

                        <img src="data:images/image_2.jpg" width="" height="" alt="">

                        <p>图片描述2</p>

                    </li>

                    <li>

                        <img src="data:images/image_3.jpg" width="" height="" alt="">

                        <p>图片描述3</p>

                    </li>

                    <li>

                        <img src="data:images/image_1.jpg" width="" height="" alt="">

                        <p>图片描述4</p>

                    </li>

                    <li>

                        <img src="data:images/image_2.jpg" width="" height="" alt="">

                        <p>图片描述5</p>

                    </li>

                    <li>

                        <img src="data:images/image_3.jpg" width="" height="" alt="">

                        <p>图片描述6</p>

                    </li>

                    <li>

                        <img src="data:images/image_1.jpg" width="" height="" alt="">

                        <p>图片描述7</p>

                    </li>

                    <li>

                        <img src="data:images/image_2.jpg" width="" height="" alt="">

                        <p>图片描述8</p>

                    </li>

                    <li>

                        <img src="data:images/image_3.jpg" width="" height="" alt="">

                        <p>图片描述9</p>

                    </li>

                    <li>

                        <img src="data:images/image_1.jpg" width="" height="" alt="">

                        <p>图片描述10</p>

                    </li>

                </ul>

            </div>

        </div>

        <script src="js/jquery.min.js"></script>

        <script src="js/jquery.imagesloaded.js"></script>

        <script src="js/jquery.wookmark.js"></script>

        <!-- Once the page is loaded, initalize the plug-in. -->

        <script type="text/javascript">

            (function ($) {

                $('#tiles').imagesLoaded(function () {

                    var handler = null;

                    // Prepare layout options.

                    var options = {

                        autoResize: true, // This will auto-update the layout when the browser window is resized.

                        container: $('#main'), // Optional, used for some extra CSS styling

                        offset: , // Optional, the distance between grid items

                        itemWidth:  // Optional, the width of a grid item

                    };

                    function applyLayout() {

                        $('#tiles').imagesLoaded(function () {

                            // Destroy the old handler

                            if (handler.wookmarkInstance) {

                                handler.wookmarkInstance.clear();

                            }

                            // Create a new layout handler.

                            handler = $('#tiles li');

                            handler.wookmark(options);

                        });

                    }

                    /**

                     * When scrolled all the way to the bottom, add more tiles.

                     */

                    function onScroll(event) {

                        // Check if we're within 100 pixels of the bottom edge of the broser window.

                        var winHeight = window.innerHeight ? window.innerHeight : $(window).height(); // iphone fix

                        var closeToBottom = ($(window).scrollTop() + winHeight > $(document).height() - );

                        //异步请求

                        if (closeToBottom) {

                            $.ajax({

                                type: 'get',

                                url: 'LoadImages.ashx',

                                async: 'true',

                                data: { getPage: page },

                                success: function (result) {

                                    $('#tiles').append(result);

                                    applyLayout();

                                    InitImage();

                                    page = page + ;

                                }

                            });

                        }

                    };

                    // Capture scroll event.

                    $(window).bind('scroll', onScroll);

                    // Call the layout function.

                    handler = $('#tiles li');

                    handler.wookmark(options);

                });

            })(jQuery);

  </script>

        <script type="text/javascript">

            var page = ;

            function InitImage() {

                $("#tiles li p").hide();

                $("#tiles li").hover(function () {

                    $(this).children().last().show();

                }, function () {

                    $(this).children().last().hide();

                });

            }

            InitImage();

        </script>

    </form>

</body>

</html>

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

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Web;

namespace waterfall

{

    /// <summary>

    /// LoadImages 的摘要说明

    /// </summary>

    public class LoadImages : IHttpHandler

    {

        public void ProcessRequest(HttpContext context)

        {

            Random rd = new Random();

            int page = int.Parse(context.Request.QueryString["getPage"]);

            StringBuilder sb = new StringBuilder();

            const string html = "<li><img src=\"images/image_@imgIndex@.jpg\" width=\"200\" height=\"300\"><p>@page@</p></li>";

            for (int i = ; i < ; i++)

            {

                sb.Append(html.Replace("@page@", (page* + i).ToString()).Replace("@imgIndex@",rd.Next(,).ToString()));

            }

            context.Response.Write(sb.ToString());

        }

        public bool IsReusable

        {

            get

            {

                return false;

            }

        }

    }

}

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. WPF 4.5 is here : check out the new features !

    So what's New in WPF Version 4.5 Developer Preview ? Here is a list of the new features and their re ...

  2. Centos 7 查看电池电量信息

    而不像 ubuntu 在 /proc/acpi/battery/BAT 中. 其中 capacity 参数就是当前电脑的剩余电量的百分比信息了

  3. [UI] 05 - Bootstrap: built-in components

    前言 一.资源 From: http://www.imooc.com/code/3777 内置组件 一.缩略图 <div class="col-xs-6 col-md-3"& ...

  4. MySQL存储写入速度慢分析

    问题背景描述: 在MySQL中执行SQL语句,比如insert,贼慢,明明可能也就只是一行数据的插入,数据量很小,但是耗费的时间却很多,为什么? 一.存储结构分析 MySQL存储结构图: 解析: 1. ...

  5. Linux驱动技术(二) _访问I/O内存

    ARM是对内存空间和IO空间统一编址的,所以,通过读写SFR来控制硬件也就变成了通过读写相应的SFR地址来控制硬件.这部分地址也被称为I/O内存.x86中对I/O地址和内存地址是分开编址的,这样的IO ...

  6. C#自定义Button按钮控件

    C#自定义Button按钮控件 在实际项目开发中经常可以遇到.net自带控件并不一定可以满足需要,因此需要自定义开发一些新的控件,自定义控件的办法也有多种,可以自己绘制线条颜色图形等进行重绘,也可以采 ...

  7. vmware虚拟机的tomcat启动以后，主机无法访问

    处理: 关闭防火墙服务:/etc/init.d/iptables stop ..................... 在wmware中安装linux后安装好数据库,JDK及tomcat后启动服务,虚 ...

  8. FOREIGN MySQL 之 多表查询

    一.多表联合查询 #创建部门 CREATE TABLE IF NOT EXISTS dept ( did int not null auto_increment PRIMARY KEY, dname ...

  9. Linux 查看进程运行的完整路径方法

    通过ps及top命令查看进程信息时,只能查到相对路径,查不到的进程的详细信息,如绝对路径等. 这时,我们需要通过以下的方法来查看进程的详细信息: Linux在启动一个进程时,系统会在/proc下创建一 ...

  10. shell特殊变量，记录一下

    $0 当前脚本的文件名 $n 传递给脚本或函数的参数.n 是一个数字,表示第几个参数.例如,第一个参数是$1,第二个参数是$2. $# 传递给脚本或函数的参数个数. $* 传递给脚本或函数的所有参数. ...