CSS3实现瀑布流布局与无限加载图片相册的实例代码

目录

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

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

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

代码实例：demo

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。