純css實現瀑布流效果
阿新 • • 發佈：2019-01-31
css：<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>純CSS3實現的瀑布流</title> <link type="text/css" rel="stylesheet" href="css/waterfall.css" /> </head> <body> <div class="container"> <div><img src="images/P_00.jpg" /></div> <div><img src="images/P_01.jpg" /></div> <div><img src="images/P_02.jpg" /></div> <div><img src="images/P_03.jpg" /></div> <div><img src="images/P_04.jpg" /></div> <div><img src="images/P_05.jpg" /></div> <div><img src="images/P_06.jpg" /></div> <div><img src="images/P_07.jpg" /></div> <div><img src="images/P_08.jpg" /></div> <div><img src="images/P_09.jpg" /></div> <div><img src="images/P_010.jpg" /></div> <div><img src="images/P_011.jpg" /></div> <div><img src="images/P_012.jpg" /></div> <div><img src="images/P_013.jpg" /></div> <div><img src="images/P_014.jpg" /></div> <div><img src="images/P_015.jpg" /></div> <div><img src="images/P_016.jpg" /></div> <div><img src="images/P_017.jpg" /></div> <div><img src="images/P_018.jpg" /></div> <div><img src="images/P_019.jpg" /></div> <div><img src="images/P_05.jpg" /></div> <div><img src="images/P_06.jpg" /></div> <div><img src="images/P_07.jpg" /></div> <div><img src="images/P_08.jpg" /></div> <div><img src="images/P_09.jpg" /></div> <div><img src="images/P_010.jpg" /></div> <div><img src="images/P_011.jpg" /></div> <div><img src="images/P_012.jpg" /></div> <div><img src="images/P_013.jpg" /></div> <div><img src="images/P_05.jpg" /></div> <div><img src="images/P_06.jpg" /></div> <div><img src="images/P_07.jpg" /></div> <div><img src="images/P_08.jpg" /></div> <div><img src="images/P_09.jpg" /></div> <div><img src="images/P_010.jpg" /></div> <div><img src="images/P_011.jpg" /></div> <div><img src="images/P_012.jpg" /></div> <div><img src="images/P_013.jpg" /></div> <div><img src="images/P_03.jpg" /></div> <div><img src="images/P_04.jpg" /></div> <div><img src="images/P_05.jpg" /></div> <div><img src="images/P_06.jpg" /></div> <div><img src="images/P_07.jpg" /></div> <div><img src="images/P_08.jpg" /></div> <div><img src="images/P_09.jpg" /></div> </div> </body> </html>
.container{
-webkit-column-width:160px;
-moz-column-width:160px;
-webkit-column-gap:5px;
-moz-column-gap:5px;
}
/*資料塊 磚塊*/
.container div{width:160px;
margin:4px 0;}