CSS3 learning Summary-implement waterfall stream layout and unlimited loading of image albums, css3 waterfall

CSS3 learning Summary-implement waterfall stream layout and unlimited loading of image albums, css3 waterfall

First, let's take a look at the waterfall stream layout and unlimited loading of image albums:

The following figure shows the code of the yixiao pic1.html page:

<! DOCTYPE html> II. The actual Photoes. cs code for simulating database data is as follows:
Using System; using System. collections. generic; using System. linq; using System. web; namespace waterfall stream layout and unlimited loading of image albums {public class Photoes {public int imgUrl {get; set;} public string Name {get; set ;} // The simulation database has two hundred pieces of data in public static List <Photoes> GetData () {List <Photoes> list = new List <Photoes> (); 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 ;}}}
III. The Handler1.ashx code of the general handler that the server returns data to the client is as follows:
Using System; using System. collections. generic; using System. linq; using System. web; using System. web. script. serialization; namespace waterfall stream layout and unlimited loading of image album {// <summary> // The General handler that the server returns data to the client /// </summary> public class Handler1: IHttpHandler {public void ProcessRequest (HttpContext context) {context. response. contentType = "text/plain"; List <Photoes> 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 ;}}}}
Conclusion: I learned about Waterfall stream layout and image loading some time ago. I made a simple example to consolidate my knowledge.
Continuous summarization, continuous consolidation, and continuous improvement...
4. Learn more about Waterfall flow layout:
CSS3 and Page Layout Study Notes (4)-page layout Overview (negative margin, dual wings, multi-column, elastic, streaming, waterfall, responsive layout)