照片瀑布流效果
作者：互联网
效果展示
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 }
标签：container,效果,column,250px,照片,width,瀑布,5px,webkit 来源： https://www.cnblogs.com/zuzhuangmengxiang/p/12539078.html