目录
一、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中文网。
更多CSS3实现瀑布流布局与无限加载图片相册相关文章请关注PHP中文网！
