*{margin: 0;padding: 0;}
body{background-color: #eee;}
.content{
position: relative;
}
.box{
padding: 15px 0 0 15px;
float: left;
}
.pic{
padding: 10px;
border: 1px solid #ccc;
box-shadow: 0 0 5px #CCCCCC;
border-radius: 5px;
background: #fff;
}
.pic img{
width: 220px;
height: auto;
border: 1px solid #eee;
}
html文件贴出来
复制代码 代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>javascript瀑布流</title>
<link type="text/css" href="https://www.jb51.net/css/pubuli.css"/>
<script type="text/javascript" src="https://www.jb51.net/js/my.js" ></script>
</head>
<body>
<div>
<div>
<div>
<img src="https://www.jb51.net/img/01.jpg"/>
</div>
</div>
<div>
<div>
<img src="https://www.jb51.net/img/02.jpg"/>
</div>
</div>
<div>
<div>
<img src="https://www.jb51.net/img/03.jpg"/>
</div>
</div>
<div>
<div>
<img src="https://www.jb51.net/img/04.jpg"/>
</div>
</div>
<div>
<div>
<img src="https://www.jb51.net/img/05.jpg"/>
</div>
</div>
<div>
<div>
<img src="https://www.jb51.net/img/06.jpg"/>
</div>
</div>
<div>
<div>
<img src="https://www.jb51.net/img/07.jpg"/>
</div>
</div>
<div>
<div>
<img src="https://www.jb51.net/img/08.jpg"/>
</div>
</div>
<div>
<div>
<img src="https://www.jb51.net/img/09.jpg"/>
</div>
</div>
<div>
<div>
<img src="https://www.jb51.net/img/10.jpg"/>
</div>
</div>
<div>
<div>
<img src="https://www.jb51.net/img/11.jpg"/>
</div>
</div>
<div>
<div>
<img src="https://www.jb51.net/img/12.jpg"/>
</div>
</div>
<div>
<div>
<img src="https://www.jb51.net/img/13.jpg"/>
</div>
</div>
<div>
<div>
<img src="https://www.jb51.net/img/14.jpg"/>
</div>
</div>
<div>
<div>
<img src="https://www.jb51.net/img/15.jpg"/>
</div>
</div>
<div>
<div>
<img src="https://www.jb51.net/img/16.jpg"/>
</div>
</div>
<div>
<div>
<img src="https://www.jb51.net/img/17.jpg"/>
</div>
</div>
<div>
<div>
<img src="https://www.jb51.net/img/18.jpg"/>
</div>
</div>
<div>
<div>
<img src="https://www.jb51.net/img/19.jpg"/>
</div>
</div>
<div>
<div>
<img src="https://www.jb51.net/img/20.jpg"/>
</div>
</div>
<div>
<div>
<img src="https://www.jb51.net/img/21.jpg"/>
</div>
</div>
<div>
<div>
<img src="https://www.jb51.net/img/22.jpg"/>
</div>
</div>
</div>
</body>
</html>
好了谢谢大家观看，以前没写过技术分享类文章，有很多不周到的地方希望大家能多多指正。学习前端的小菜鸟敬上Y(^_^)Y
您可能感兴趣的文章: