瀑布流waterfall资源-CSDN文库

共13个文件

jpg：6个

js：4个

html：3个

waterfall

需积分: 12 10 浏览量 2017-09-12 16:07:37 上传评论收藏 308KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

瀑布流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

jquery-1.7.2.min.js 93KB

waterfall-flow.js 269KB

Waterfall.js 7KB

work-detail.js 3KB

demo.html 2KB

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

评论收藏

内容反馈