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

本篇文章主要介绍了CSS3实现瀑布流布局与无限加载图片相册的实例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。

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

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

三、服务器返回数据给客户端的一般处理程序https://www.html.cn/qa/css3/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; } } }

三、服务器返回数据给客户端的一般处理程序https://www.html.cn/qa/css3/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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持易知道|edz.cc。

以上就是CSS3实现瀑布流布局与无限加载图片相册的实例代码的详细内容，更多请关注易知道|edz.cc其它相关文章！