Pure CSS3 to create waterfall flow layouts

Pure CSS3 to create waterfall flow layouts

Principle:　

1. Column-count How many columns the text in the div is divided into

2, column-width specified column width

3, column-gap specified column clearance

4, Break-inside:avoid; Avoid line breaks within elements and create new columns

　　Note: Internet Explorer 9 and earlier IE versions browsers do not support the Column-count property.

Advanced Reference: principle: http://www.zhangxinxu.com/wordpress/?p=2308

Effect: http://www.zhangxinxu.com/study/201203/waterfall-layout.html###

The code is as follows:

<! DOCTYPE html>"en"> "UTF-8"> <title>css3 Waterfall Flow </title> <meta name="Viewport"Content="Width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> <meta http-equiv="x-ua-compatible"Content="ie=edge,chrome=1"> <style> *{margin:0; padding:0; }            /*Large Floor*/. Container {width: -%; Margin:0Auto; }            /*Waterfall Flow Layer*/. Waterfall {-moz-column-count:4; /*Firefox*/-webkit-column-count:4; /*Safari and Chrome*/column-count:4; -moz-column-gap:0. 5em; -webkit-column-gap:0. 5em; Column-gap:0. 5em; }            /*a content layer*/. Item {padding:0; Margin:0 01em0; -moz-page- Break-inside:avoid; -webkit-column- Break-inside:avoid;  Break-inside:avoid; border:1px Solid # the; }. Item img {width: -%; Margin-bottom:10px; }        </style> class="Container"> <divclass="Waterfall"> <divclass="Item"> "https://imgsa.baidu.com/baike/c0%3Dbaike72%2C5%2C5%2C72%2C24/sign=f3d4063328738bd4d02cba63c0e2ecb3/ A2cc7cd98d1001e910616de1be0e7bec55e797fa.jpg"> <p>1Convallis timestamp</p> </div> <divclass="Item"> "https://imgsa.baidu.com/baike/c0%3Dbaike92%2C5%2C5%2C92%2C30/sign=03948ea9b4315c60579863bdecd8a076/ 8326cffc1e178a825a6b5d1cfe03738da977e833.jpg"> <p>2Convallis timestamp2Donec a fermentum nisi. </p> </div> <divclass="Item"> "https://imgsa.baidu.com/baike/c0%3Dbaike80%2C5%2C5%2C80%2C26/sign=3d645bf2d0ca7bcb6976cf7ddf600006/ 6d81800a19d8bc3efe5f64fb858ba61ea8d345af.jpg"> <p>3Nullam eget lectus augue. Donec eu sem sit amet ligula faucibus suscipit.                Suspendisse rutrum turpis quis nunc convallis quis aliquam mauris suscipit.</p> </div> <divclass="Item"> "https://imgsa.baidu.com/baike/c0%3Dbaike180%2C5%2C5%2C180%2C60/sign=fbc3501b0a087bf469e15fbb93ba3c49/ Bf096b63f6246b60ea65dd24e3f81a4c510fa273.jpg"> <p>4Donec a fermentum nisi. Integer dolor EST, commodo ut sagittis vitae, Egestas at Augue. </p> </div> <divclass="Item"> "https://imgsa.baidu.com/baike/c0%3Dbaike150%2C5%2C5%2C150%2C50/sign=9fe1d71697ef76c6c4dff379fc7f969f/ B03533fa828ba61ed2efcd184634970a304e5987.jpg"> <p>5Donec a fermentum nisi. Integer dolor EST, commodo ut sagittis vitae, egestas at augue.</p> </div> </div&        Gt </div> </body>
Pure CSS3 to create waterfall flow layouts