瀑布流布局与无限加载图片相册效果

这次给大家带来瀑布流布局与无限加载图片相册效果，实现瀑布流布局与无限加载图片相册效果的注意事项有哪些，下面就是实战案例，一起来看一下。

目录

一、pic1.html页面代码如下：

二、模拟数据库数据的实体类Photoes.cs代码如下：

三、服务器返回数据给客户端的一般处理程序Handler1.ashx代码如下：

四、示例下载：

五、了解更多瀑布流布局的的知识

首先给大家看一下瀑布流布局与无限加载图片相册效果图：

一、pic1.html页面代码如下：

    
    
    


    

        
picture-1
        
picture-2
        
picture-3
        
picture-4
        
picture-5
        
picture-6
        
picture-7
        
picture-8
        
picture-9
        
picture-10
        
picture-11
        
picture-12
        
picture-13
        
picture-14
        
picture-15
        
picture-16
        
picture-17
        
picture-18
        
picture-19
        
picture-20
    

    下一页
    
    
    
    
    
    

二、模拟数据库数据的实体类Photoes.cs代码如下：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace 瀑布流布局与无限加载图片相册
{
    public class Photoes
    {
        public int imgUrl { get; set; }
        public string Name { get; set; }
        //模拟数据库有两百条数据
        public static List GetData()
        {
            List list = new List();
            Photoes pic = null;
            for (int i= 21; i <=200; i++)
            {
                pic = new Photoes();
                pic.imgUrl = i;
                pic.Name = "Picture-" + i;
                list.Add(pic);
            }
            return list;
        }
    }
}

三、服务器返回数据给客户端的一般处理程序Handler1.ashx代码如下：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Script.Serialization;
namespace 瀑布流布局与无限加载图片相册
{
    /// 

    /// 服务器返回数据给客户端的一般处理程序
    /// 
    public class Handler1 : IHttpHandler
    {
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            List result = Photoes.GetData();
            int pageIndex = Convert.ToInt32(context.Request["page"]);
            var filtered = result.Where(p => p.imgUrl >= pageIndex * 20 - 19 && p.imgUrl <= pageIndex * 20).ToList();
            JavaScriptSerializer ser = new JavaScriptSerializer();
            string jsonData = ser.Serialize(filtered);
            context.Response.Write(jsonData);
        }
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

总结：前段时间学习了瀑布流布局与图片加载等知识,做了一个简单的示例，希望能巩固一下自己所学的知识。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

Audo Studio

AI音频清洗工具（噪音消除、声音平衡、音量调节）

下载

CSS实现3D按钮效果

opacity透明度滤镜的IE兼容解决方法

HTML5+CSS3加载进度条与下载进度条实现