• 在asp.net中使用瀑布流,无限加载


    页面中代码

    <%@ 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下载:点击这里下载

  • 相关阅读:
    TCP Three-Way handshake
    java 连接mysql 和sql server2008代码
    关于dispatch_sync死锁问题
    MacBook Pro使用初体验之Mac快捷键汇总(持续更新中)
    Java对象的内存布局
    Android之adb
    ADT开发中的一些优化设置:代码背景色、代码字体大小、代码自动补全
    实用的eclipse adt 快捷键
    python操作Excel读--使用xlrd
    解决ImportError: cannot import name HTTPConnection的方法
  • 原文地址:https://www.cnblogs.com/mengxingxinqing/p/3408030.html
Copyright © 2020-2023  润新知