CSS3实现瀑布流布局与无限加载图片相册的实例代码3种方式实现瀑布流布局小结详解纯css实现瀑布流（multi-column多列及flex布局）css3 column实现卡片瀑布流布局的示例代码用CSS3实现瀑布流布局的示例代码瀑布流布局的两种实现方式：传统多列浮动和绝对定位布局waterfall瀑布流布局+动态渲染的实现

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

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; } } } 

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; } } } }