CSS3 's learning--realizing waterfall flow

Last Update:2014-06-09 Source: Internet

Author: User

Tags border color

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Implement waterfall streams based on CSS3, using CSS3 's CSS Multi-column (multi-column).

You can download the source code on GitHub: HTTPS://GITHUB.COM/CRARYPRIMITIVEMAN/WATERFALL-CSS3

waterfall Flow, also known as Waterfall flow layout. is a more popular site page layout , visually displayed as a jagged multi-column layout, as the page scroll bar scroll down, this layout will continue to load the data block and attached to the current trailer. We just implemented a multi-column layout.

CSS Multi-column (multi-column): http://www.w3chtml.com/css3/properties/multi-column/

Properties Property	CSS Version Version	Inherit from Parent Description of inheritance	Brief introduction
Columns	CSS3	No	The CSS3 Columns property, which is a composite property, sets or retrieves the number of columns and the width of each column of an object.
Column-width	CSS3	No	CSS3 Column-width property to set or retrieve the width of each column of an object
Column-count	CSS3	No	CSS3 Column-count property to set or retrieve the number of columns of an object
Column-gap	CSS3	No	CSS3 Column-gap property to set or retrieve the gap between the column and columns of an object
Column-rule	CSS3	No	The CSS3 Column-rule property is a composite property. Sets or retrieves the border between the columns of the object and the column.
Column-rule-width	CSS3	No	CSS3 the Column-rule-width property, sets or retrieves the border thickness between the columns of the object and the column.
Column-rule-style	CSS3	No	CSS3 the Column-rule-style property, sets or retrieves the border style between the columns of the object and the column.
Column-rule-color	CSS3	No	CSS3 the Column-rule-color property, sets or retrieves the border color between the columns of the object and the column.
Column-span	CSS3	No	CSS3 the Column-span property, sets or retrieves whether the object element spans all columns.
Column-fill	CSS3	No	CSS3 the Column-fill property, sets or retrieves the uniform height of all columns of an object.
Column-break-before	CSS3	No	CSS3 the Column-break-before property to set or retrieve the object before it breaks.
Column-break-after	CSS3	No	CSS3 the Column-break-after property to set or retrieve the object after the break.
Column-break-inside	CSS3	No	CSS3 the Column-break-inside property to set or retrieve whether a break is inside an object.

First, write a simple picture page

<HTML>    <Head>        <Linkrel= "stylesheet"type= "Text/css"href= "Css/main.css">        <Scripttype= "Text/javascript"src=".. /lib/jquery/jquery-1.11.1.min.js "></Script>    </Head>    <Body>        <DivID= "Main">            <Divclass= "box">                <Divclass= "Pic">                    <imgsrc="">                </Div>            </Div>            <Divclass= "box">                <Divclass= "Pic">                    <imgsrc="">                </Div>            </Div>            <!--this omits multiple div classes as box. -            <Divclass= "box">                <Divclass= "Pic">                    <imgsrc="">                </Div>            </Div>        </Div>    </Body>    <Scripttype= "Text/javascript">        varwidth=  -, Height=  -; $('. Box img'). each (function(){            //the height of the random image, if the size of the same, there is no need to flow with the waterfallwidth=Math.floor (Math.random ()*  -) +  -; Height=Math.floor (Math.random ()*  -) +  -; $( This). attr ('src', 'http://placekitten.com/'+Height+'/' +width);    }); </Script></HTML>

Assuming that the width and height are 350, generate links for http://placekitten.com/350/350, access this link will get a picture of 350x350 cute kitten ~~o (∩_∩) o~~

Then, add the appropriate CSS to

* {padding:0;margin:0;}#main{-webkit-column-count:4;-moz-column-count:4;Column-count:4;-moz-column-gap:20px;-webkit-column-gap:20px;Column-gap:20px;padding:10px;}. Box{padding:15px;Border:Solid 2px #eeeeee;Border-radius:4px;Margin-bottom:15px;cursor:Pointer;}. Box img{width:100%;}

The Column-count representative is divided into columns, Column-gap represents the width between the columns columns, and you can adjust them to suit your needs. We can also use Column-width to define column widths.

This is done, is not very simple ~ ~

Finally, the following

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More