页面中代码
<%@ 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="images/image_1.jpg" width="200" height="300" alt=""> <p>图片描述1</p> </li> <li> <img src="images/image_2.jpg" width="200" height="300" alt=""> <p>图片描述2</p> </li> <li> <img src="images/image_3.jpg" width="200" height="300" alt=""> <p>图片描述3</p> </li> <li> <img src="images/image_1.jpg" width="200" height="300" alt=""> <p>图片描述4</p> </li> <li> <img src="images/image_2.jpg" width="200" height="300" alt=""> <p>图片描述5</p> </li> <li> <img src="images/image_3.jpg" width="200" height="300" alt=""> <p>图片描述6</p> </li> <li> <img src="images/image_1.jpg" width="200" height="300" alt=""> <p>图片描述7</p> </li> <li> <img src="images/image_2.jpg" width="200" height="300" alt=""> <p>图片描述8</p> </li> <li> <img src="images/image_3.jpg" width="200" height="300" alt=""> <p>图片描述9</p> </li> <li> <img src="images/image_1.jpg" width="200" height="300" 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: 20, // Optional, the distance between grid items itemWidth: 210 // 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() - 200); //异步请求 if (closeToBottom) { $.ajax({ type: 'get', url: 'LoadImages.ashx', async: 'true', data: { getPage: page }, success: function (result) { $('#tiles').append(result); applyLayout(); InitImage(); page = page + 1; } }); } }; // 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 = 1; 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 = 0; i < 10; i++) { sb.Append(html.Replace("@page@", (page*10 + i).ToString()).Replace("@imgIndex@",rd.Next(1,11).ToString())); } context.Response.Write(sb.ToString()); } public bool IsReusable { get { return false; } } } }
wookmark下载地址：点击这里下载
demo下载：点击这里下载