码迷,mamicode.com
首页 > 其他好文 > 详细

照片瀑布流效果

时间:2020-03-21 14:29:43      阅读:58      评论:0      收藏:0      [点我收藏+]

标签:css   img   src   mamicode   margin   set   图片   div   web   

效果展示

技术图片

 

html

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>风景</title>
  6     <link href="style.css" type="text/css" rel="stylesheet">
  7 </head>
  8 <body>
  9     <div class="container">
 10         <div><img src="image/1.jpg">
 11         <p>添加一个标签</p></div>
 12         <div><img src="image/2.jpg"></div>
 13         <div><img src="image/3.jpg"></div>
 14         <div><img src="image/4.jpg"></div>
 15         <div><img src="image/5.jpg"></div>
 16         <div><img src="image/6.jpg"></div>
 17         <div><img src="image/7.jpg"></div>
 18         <div><img src="image/8.jpg"></div>
 19         <div><img src="image/9.jpg"></div>
 20         <div><img src="image/1.jpg"></div>
 21         <div><img src="image/2.jpg"></div>
 22         <div><img src="image/3.jpg"></div>
 23         <div><img src="image/4.jpg"></div>
 24         <div><img src="image/5.jpg"></div>
 25         <div><img src="image/6.jpg"></div>
 26         <div><img src="image/7.jpg"></div>
 27         <div><img src="image/8.jpg"></div>
 28         <div><img src="image/9.jpg"></div>
 29         <div><img src="image/1.jpg"></div>
 30         <div><img src="image/2.jpg"></div>
 31         <div><img src="image/3.jpg"></div>
 32         <div><img src="image/4.jpg"></div>
 33         <div><img src="image/5.jpg"></div>
 34         <div><img src="image/6.jpg"></div>
 35         <div><img src="image/7.jpg"></div>
 36         <div><img src="image/8.jpg"></div>
 37         <div><img src="image/9.jpg"></div>
 38         <div><img src="image/1.jpg"></div>
 39         <div><img src="image/2.jpg"></div>
 40         <div><img src="image/3.jpg"></div>
 41         <div><img src="image/4.jpg"></div>
 42         <div><img src="image/5.jpg"></div>
 43         <div><img src="image/6.jpg"></div>
 44         <div><img src="image/7.jpg"></div>
 45         <div><img src="image/8.jpg"></div>
 46         <div><img src="image/9.jpg"></div>
 47         <div><img src="image/1.jpg"></div>
 48         <div><img src="image/2.jpg"></div>
 49         <div><img src="image/3.jpg"></div>
 50         <div><img src="image/4.jpg"></div>
 51         <div><img src="image/5.jpg"></div>
 52         <div><img src="image/6.jpg"></div>
 53         <div><img src="image/7.jpg"></div>
 54         <div><img src="image/8.jpg"></div>
 55         <div><img src="image/9.jpg"></div>
 56         <div><img src="image/1.jpg"></div>
 57         <div><img src="image/2.jpg"></div>
 58         <div><img src="image/3.jpg"></div>
 59         <div><img src="image/4.jpg"></div>
 60         <div><img src="image/5.jpg"></div>
 61         <div><img src="image/6.jpg"></div>
 62         <div><img src="image/7.jpg"></div>
 63         <div><img src="image/8.jpg"></div>
 64         <div><img src="image/9.jpg"></div>
 65         <div><img src="image/1.jpg"></div>
 66         <div><img src="image/2.jpg"></div>
 67         <div><img src="image/3.jpg"></div>
 68         <div><img src="image/4.jpg"></div>
 69         <div><img src="image/5.jpg"></div>
 70         <div><img src="image/6.jpg"></div>
 71         <div><img src="image/7.jpg"></div>
 72         <div><img src="image/8.jpg"></div>
 73         <div><img src="image/9.jpg"></div>
 74         <div><img src="image/1.jpg"></div>
 75         <div><img src="image/2.jpg"></div>
 76         <div><img src="image/3.jpg"></div>
 77         <div><img src="image/4.jpg"></div>
 78         <div><img src="image/5.jpg"></div>
 79         <div><img src="image/6.jpg"></div>
 80         <div><img src="image/7.jpg"></div>
 81         <div><img src="image/8.jpg"></div>
 82         <div><img src="image/9.jpg"></div>
 83         <div><img src="image/1.jpg"></div>
 84         <div><img src="image/2.jpg"></div>
 85         <div><img src="image/3.jpg"></div>
 86         <div><img src="image/4.jpg"></div>
 87         <div><img src="image/5.jpg"></div>
 88         <div><img src="image/6.jpg"></div>
 89         <div><img src="image/7.jpg"></div>
 90         <div><img src="image/8.jpg"></div>
 91         <div><img src="image/9.jpg"></div>
 92         <div><img src="image/1.jpg"></div>
 93         <div><img src="image/2.jpg"></div>
 94         <div><img src="image/3.jpg"></div>
 95         <div><img src="image/4.jpg"></div>
 96         <div><img src="image/5.jpg"></div>
 97         <div><img src="image/6.jpg"></div>
 98         <div><img src="image/7.jpg"></div>
 99         <div><img src="image/8.jpg"></div>
100         <div><img src="image/9.jpg"></div>
101         <div><img src="image/1.jpg"></div>
102         <div><img src="image/2.jpg"></div>
103         <div><img src="image/3.jpg"></div>
104         <div><img src="image/4.jpg"></div>
105         <div><img src="image/5.jpg"></div>
106         <div><img src="image/6.jpg"></div>
107         <div><img src="image/7.jpg"></div>
108         <div><img src="image/8.jpg"></div>
109         <div><img src="image/9.jpg"></div>
110     </div>
111 </body>
112 </html>

css

 1 .container{
 2      column-width: 250px;
 3      -webkit-column-width: 250px;
 4      column-gap: 5px;
 5      -webkit-column-gap: 5px;
 6  }
 7 .container div img{
 8     width: 250px;
 9 }
10 .container div{
11     width: 250px;
12     margin: 5px 0;
13 }

 

照片瀑布流效果

标签:css   img   src   mamicode   margin   set   图片   div   web   

原文地址:https://www.cnblogs.com/zuzhuangmengxiang/p/12539078.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!