CSS3如何实现瀑布流布局与无限加载图片相册

这篇文章主要介绍了CSS3如何实现瀑布流布局与无限加载图片相册,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

网站建设哪家好,找成都创新互联公司!专注于网页设计、网站建设、微信开发、小程序设计、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了兴宾免费建站欢迎大家使用!

一、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

    
    下一页                              

二、模拟数据库数据的实体类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;
            }
        }
    }
}

感谢你能够认真阅读完这篇文章,希望小编分享的“CSS3如何实现瀑布流布局与无限加载图片相册”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!


标题名称:CSS3如何实现瀑布流布局与无限加载图片相册
网站地址:http://myzitong.com/article/pjgpde.html

其他资讯