css3--waterfall Stream, multiple columns (multi-column)

Example-Waterfall flow

<Divclass= "View">     <Divclass= "Item">         ! [] (XX)</Div></Div><style>. View{Column-count:2;//settings Display 2 columns Column-gap:2px;//Set or retrieve the gap between the columns of the object and the column is 2px width:100%;    }. Item{width:95%;background:#fefefe;Border:2px solid #fcfcfc;Box-shadow:0px 2px 2px rgba (0.4);margin:5px 2px 2px 2px;padding:1px;transition:opacity. 4s ease-in-out;//Retrieves or sets the transition display when an object is transformed:Inline-block;    }. Item img{width:100%!important;Display:Block;    }</style>

View Code

Multiple columns

columns:< ' column-width ' > | | < ' Column-count ' >
Sets or retrieves the number of columns of an object and the width of each column. Composite properties

/* fixed number of columns and column widths */ -moz-columns:200px 3;-webkit-columns:200px 3;columns:200px 3; /* fixed column width, liquid distribution of columns according to container widths */ -moz-columns:200px;-webkit-columns:200px;columns:200px;

View Code

column-width:<length> | Auto
Sets or retrieves the width of each column of an object;
Auto: According to < ' Column-count ' > Custom distribution width

/* fixed column width, liquid distribution of columns according to container widths */ -moz-column-width:200px;-webkit-column-width:200px;column-width:200px;

View Code

Column-count:<integer> | Auto
Sets or retrieves the number of columns of an object;
Auto: According to < ' column-width ' > Custom distribution width

/* fixed number of columns, liquid distribution of column widths according to container width */ -moz-column-count:5;-webkit-column-count:5;column-count:5;

View Code

Column-gap:<length> | Normal
Set or retrieve the gap between the column and columns of an object

/* fixed column gap is 40px */ -moz-column-gap:40px;-webkit-column-gap:40px;column-gap:40px; /* when the column Gap Column-gap:normal;font-size is 14px, the computed value of the column Gap Column-gap:normal is also 14px */ -moz-column-gap:normal;-webkit-column-gap:normal;column-gap:normal;

View Code

column-rule:< ' column-rule-width ' > | | < ' Column-rule-style ' > | | < ' Column-rule-color ' >
Sets or retrieves the border between the columns of the object and the column. Composite properties

/* set a green spacer between columns and columns */ -moz-column-rule:10px solid #090,-webkit-column-rule:10px solid #090, column-rule:10px solid #090;

View Code

column-rule-width:<length> | Thin | Medium | Thick
Medium: Defines the bounding rectangle of the default thickness;
Thin: Defines a border that is thinner than the default thickness;
Thick: Defines a border that is thicker than the default thickness

column-fill: Auto | Balance
Sets or retrieves the uniform height of all columns of an object;
Auto: column height adaptive content;
Balance: The height of all columns is consistent with the highest of the columns

column-break-before: Auto | Always | Avoid | Left | Right | Page | Column | Avoid-page | Avoid-column
Whether to break the object before setting or retrieving it;
Auto: Neither forcing nor prohibiting line breaking before the element and generating new columns;
Always: line up before an element and create a new column
Avoid: Avoid line breaks before elements and create new columns

column-break-after: Auto | Always | Avoid | Left | Right | Page | Column | Avoid-page | Avoid-column
Whether to break a break after setting or retrieving an object

column-break-inside: Auto | Avoid | Avoid-page | Avoid-column
Sets or retrieves whether a break is inside an object;
Auto: Neither forcing nor prohibiting line breaking within the element and generating new columns;
Avoid: Avoid line breaks within elements and create new columns

css3--waterfall Stream, multiple columns (multi-column)