事理图:

在一个大盒子里,放置多个小盒子,小盒子的大小可以不一致,长短不一样,呈现一种瀑布流的效果。

利用CSS3S实现只须要如下4步:

html瀑布流干货来袭web前端开辟工程师必看之若何应用CSS3实现瀑布流后果 Vue.js

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 多栏属性完成瀑布流布局