首先,我们来看一下什么是瀑布流布局效果,比如电商网站 蘑菇街
原理图:
在一个大盒子里，放置多个小盒子，小盒子的大小可以不一致，长短不一样，呈现一种瀑布流的效果。
使用CSS3S实现只需要如下4步:
1.准备图片素材
2.书写相应HTML结构
3.了解CSS 多栏(Multi-column) 属性
4.使用CSS 多栏属性完成瀑布流布局
一、第一步 —— 准备图片素材
目标 :准备图片素材,每张图片的宽度长度最好都不要同样大小的,另外,图片宽度高度也不宜太大
小结 :准备多张图片素材,宽度高度不宜超过1000像素
二、第二步 —— 书写相应HTML结构
目标 :在HTML页面中插入多个图片标签img,并正确通过src属性引入鼠标
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><div class="box"><img src="images/P_001.jpg"/><img src="images/P_002.jpg"/><img src="images/P_003.jpg"/><img src="images/P_004.jpg"/><img src="images/P_005.jpg"/><img src="images/P_006.jpg"/><img src="images/P_007.jpg"/><img src="images/P_008.jpg"/><img src="images/P_009.jpg"/><img src="images/P_010.jpg"/><img src="images/P_011.jpg"/><img src="images/P_012.jpg"/><img src="images/P_013.jpg"/><img src="images/P_014.jpg"/><img src="images/P_015.jpg"/><img src="images/P_016.jpg"/><img src="images/P_017.jpg"/><img src="images/P_018.jpg"/><img src="images/P_019.jpg"/><img src="images/P_020.jpg"/></div></body></html>
小结 :通过img标签的src属性正确引入图片,需要多个img标签,因为我们需要多个图片
三、第三步 —— 了解CSS 多栏(Multi-column) 属性
小结 :
l column-count指定元素应该被分割的列数
l column-width指定列的宽度
l column-gap指定列与列之间的间隙
四、第四步 —— 使用CSS 多栏属性完成瀑布流布局
目标 :使用CSS多栏属性实现我们的图片瀑布流布局
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text/css">/*清除所有标签的内外边距*/*{margin: 0;padding: 0;}/*选中.box标签*/.box{/*把.box中的内容最多分为4列,会根据浏览器的大小变化,但是不会超过4列*/column-count: 4;/*规定每列列宽最小为200px*/column-width: 200px;/*规定每列的间隙为1em*/column-gap: 1em;/*盒子宽度为1000px*/width: 1000px;/*实现盒子水平居中*/margin:0 auto;}/*选中.box下的所有img标签*/.box img{/*上下左右5px的内填充*/padding:5px;/*上下左右5px的外边距*/margin:5px;/*圆角边框*/border-radius:5px;/*盒子阴影*/box-shadow:0px 0px 5px gray;}</style></head><body><div class="box"><img src="images/P_001.jpg"/><img src="images/P_002.jpg"/><img src="images/P_003.jpg"/><img src="images/P_004.jpg"/><img src="images/P_005.jpg"/><img src="images/P_006.jpg"/><img src="images/P_007.jpg"/><img src="images/P_008.jpg"/><img src="images/P_009.jpg"/><img src="images/P_010.jpg"/><img src="images/P_011.jpg"/><img src="images/P_012.jpg"/><img src="images/P_013.jpg"/><img src="images/P_014.jpg"/><img src="images/P_015.jpg"/><img src="images/P_016.jpg"/><img src="images/P_017.jpg"/><img src="images/P_018.jpg"/><img src="images/P_019.jpg"/><img src="images/P_020.jpg"/></div></body></html>
小结 :注意属性名与取值不要写错,每个css属性值后面都有一个英文状态的分号
总结
使用CSS3可以轻松实现瀑布流布局，但 Internet Explorer 9及更早 IE 版本浏览器不支持 column-count 属性。
我们再来回顾一下，我们刚刚实现的步骤:
1.准备图片素材
2.书写相应HTML结构: 使用多张图片,放在同一个大盒子中
3.了解CSS 多栏(Multi-column) 属性
– column-count 把指定盒子中的内容最多分为多少列,会根据浏览器的大小变化,但是不会超过我们指定的列数
– column-width 规定每列列宽最小为多少
– column-gap 规定每列的间隙
4.使用CSS 多栏属性完成瀑布流布局
原作者：黑马程序员
原平台：传智播客官网
原链接：Web前端培训：如何使用CSS3实现瀑布流效果?
前端如何实现音乐盒胶盘的转动_干货来袭！web前端开发工程师必看之如何使用CSS3实现瀑布流效果?...
