纯css实现瀑布流效果

来源：互联网发布：在linux用yum安装jdk 编辑：程序博客网时间：2024/05/29 06:47

<!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>

css：

.container{    -webkit-column-width:160px;    -moz-column-width:160px;   -webkit-column-gap:5px;  -moz-column-gap:5px;}/*数据块 砖块*/.container div{width:160px;               margin:4px 0;}

阅读全文

0 0