CSS3轻松实现瀑布流布局与无限加载图片相册的教程

作者：袖梨 2022-06-25

目录

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

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

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

四、示例下载：

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

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

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

    
    瀑布流布局与无限加载图片相册
    
        * {
            margin: 0;
            padding: 0;
        }
 
        body {
            background: url(../img/bg5.jpg);
        }
 
        #items {
            width: 1060px;
            margin: 0 auto;
            border: 1px solid lightpink;
        }
 
        .item {
            border: 1px solid lightpink;
            width: 200px;
            color: purple;
            font-size: 30px;
            font-weight: bolder;
            margin: 5px;
            text-align: center;
            opacity: 0.8;
        }
 
        img {
            width: 200px;
        }
    
    
        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

    
    下一页
    javascript"charset="utf-8">
    
    
    
    
    

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

usingSystem;
usingSystem.Collections.Generic;
usingSystem.Linq;
usingSystem.Web;
 
namespace瀑布流布局与无限加载图片相册
{
    publicclassPhotoes
    {
        publicintimgUrl {get;set; }
        publicstringName {get;set; }
        //模拟数据库有两百条数据
        publicstaticList GetData()
        {
            List list =newList();
            Photoes pic =null;
            for(inti= 21; i <=200; i++)
            {
                pic =newPhotoes();
                pic.imgUrl = i;
                pic.Name ="Picture-"+ i;
                list.Add(pic);
            }
            returnlist;
        }
    }
}

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

usingSystem;
usingSystem.Collections.Generic;
usingSystem.Linq;
usingSystem.Web;
usingSystem.Web.Script.Serialization;
 
namespace瀑布流布局与无限加载图片相册
{
    ///
    /// 服务器返回数据给客户端的一般处理程序
    ///
    publicclassHandler1 : IHttpHandler
    {
        publicvoidProcessRequest(HttpContext context)
        {
            context.Response.ContentType ="text/plain";
            List result = Photoes.GetData();
            intpageIndex = Convert.ToInt32(context.Request["page"]);
            var filtered = result.Where(p => p.imgUrl >= pageIndex * 20 - 19 && p.imgUrl <= pageIndex * 20).ToList();
            JavaScriptSerializer ser =newJavaScriptSerializer();
            stringjsonData = ser.Serialize(filtered);
            context.Response.Write(jsonData);
        }
 
        publicboolIsReusable
        {
            get
            {
                returnfalse;
            }
        }
    }
}

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

相关文章

精彩推荐