<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>演示：jQuery弹出窗口切换登录与注册表单</title>
<meta name="keywords" content="jquery,注册" />
<meta name="description" content="Helloweba文章结合实例演示HTML5、CSS3、jquery、PHP等WEB技术应用。" />
<style type="text/css">
@charset "utf-8";
/* CSS Document */
html,body,div,span,h1,h2,h3,h4,h5,h6,p,pre,a,code,em,img,small,strong,sub,sup,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
a{color:#007bc4/*#424242*/; text-decoration:none;}
a:hover{text-decoration:underline}
ol,ul{list-style:none}
table{border-collapse:collapse;border-spacing:0}
.clearfix {
clear: both;
}
/*瀑布流*/
.waterfall {
width: 850px;
margin-top: 10px;
position: relative;
overflow: hidden;
background-color: #dcdcdf;
}
.waterfall .item {
position: absolute;
width: 270px;
top: 0;
left: 0;
margin-left: 10px;
margin-top: 10px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
-ms-transition: all 0.3s;
transition: all 0.3s;
}
.waterfall .item p {
font-size: 14px;
text-align: center;
margin-top: 5px;
}
.waterfall .item-img {
background-color: #FFF;
padding: 15px;
}
.waterfall .item-img img {
width: 240px;
}
</style>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script src="js/waterfall-flow.js"></script>
<script src="js/work-detail.js"></script>
</head>
<body>
<div class="waterfall" id="waterfall">
<div class="item">
<div class="item-img"><img src="img/detail-a.jpg" /></div>
<p>冲印数量1</p>
</div>
<div class="item">
<div class="item-img"><img src="img/detail-b.jpg" /></div>
<p>冲印数量1</p>
</div>
<div class="item">
<div class="item-img"><img src="img/detail-c.jpg" /></div>
<p>冲印数量1</p>
</div>
<div class="item">
<div class="item-img"><img src="img/detail-d.jpg" /></div>
<p>冲印数量1</p>
</div>
<div class="item">
<div class="item-img"><img src="img/detail-c.jpg" /></div>
<p>冲印数量1</p>
</div>
<div class="item">
<div class="item-img"><img src="img/detail-f.jpg" /></div>
<p>冲印数量1</p>
</div>
<div class="item">
<div class="item-img"><img src="img/detail-a.jpg" /></div>
<p>冲印数量1</p>
</div>
<div class="item">
<div class="item-img"><img src="img/detail-c.jpg" /></div>
<p>冲印数量4</p>
</div>
<div class="item">
<div class="item-img"><img src="img/detail-a.jpg" /></div>
<p>冲印数量1</p>
</div>
<div class="item">
<div class="item-img"><img src="img/detail-c.jpg" /></div>
<p>冲印数量4</p>
</div>
</div>
<div class="clearfix"></div>
</body>
</html>
瀑布流waterfall.rar （13个子文件） 
瀑布流waterfall css img 
detail-f.jpg 32KB detail-b.jpg 32KB detail-e.jpg 32KB detail-d.jpg 31KB detail-a.jpg 32KB detail-c.jpg 39KB
demo1.html 2KB index.html 3KB js 
jquery-1.7.2.min.js 93KB waterfall-flow.js 269KB Waterfall.js 7KB work-detail.js 3KB demo.html 2KB资源评论
面条请不要欺负汉堡
- 粉丝: 8862
最新资源
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
