Waterfall flow layout with unlimited load Picture album effect

This time to bring you waterfall flow layout and unlimited load Picture album effect, to achieve waterfall flow layout and unlimited load Picture album effect of note what, the following is the actual case, take a look.

Directory

First, the pic1.html page code is as follows:

Second, the simulation database data entity class Photoes.cs code is as follows:

Third, the server returns data to the client's general handler Handler1.ashx code is as follows:

Iv. Sample Download:

V. Learn more about the waterfall flow layout

First, let's take a look at the waterfall flow layout and unlimited load picture albums:

First, the pic1.html page code is as follows:

<! DOCTYPE html>
Second, the simulation database data entity class Photoes.cs code is as follows:

Using system;using system.collections.generic;using system.linq;using system.web;namespace waterfall flow layout with unlimited load picture album {    public class Photoes    {public        int Imgurl {get; set;}        public string Name {get; set;}        The simulation database has 200 data public        static list<photoes> GetData ()        {            list<photoes> List = new list< Photoes> ();            Photoes pic = null;            for (int i=; I <=200; i++)            {                pic = new Photoes ();                Pic.imgurl = i;                Pic. Name = "picture-" + i;                List. Add (pic);            }            return list;}}    }
Third, the server returns data to the client's general handler Handler1.ashx code is as follows:

using system;using system.collections.generic;using System.Linq;using System.web;using System.web.script.serialization;namespace Waterfall Flow layout with unlimited load pictures album {//<summary>///server return data to client's general process Order///</summary> public class Handler1:ihttphandler {public void ProcessRequest (HttpContext conte XT) {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; }        }    }}
Summary: The previous period of time to learn the waterfall flow layout and picture loading knowledge, do a simple example, I hope to consolidate the knowledge I learned.

Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!

Recommended reading:

CSS for 3D button effects

Opacity transparency filter for IE compatible solutions

HTML5+CSS3 Loading progress bar and download progress bar implementation