Web前端培训：使用CSS3实现瀑布流效果

什么是瀑布流布局效果,比如电商网站：蘑菇街。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11245.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11245.html

原理图：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11245.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11245.html

在一个大盒子里，放置多个小盒子，小盒子的大小可以不一致，长短不一样，呈现一种瀑布流的效果。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11245.html

使用CSS3S实现只需要如下4步:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11245.html

1. 准备图片素材文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11245.html

2. 书写相应HTML结构文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11245.html

3. 了解CSS 多栏(Multi-column) 属性文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11245.html

4. 使用CSS 多栏属性完成瀑布流布局文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11245.html

一. 第一步 —— 准备图片素材文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11245.html

目标 : 准备图片素材,每张图片的宽度长度最好都不要同样大小的,另外,图片宽度高度也不宜太大文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11245.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11245.html

小结 : 准备多张图片素材,宽度高度不宜超过1000像素文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11245.html

二. 第二步 —— 书写相应HTML结构文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11245.html

目标 : 在HTML页面中插入多个图片标签img,并正确通过src属性引入鼠标文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11245.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11245.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11245.html

小结 : 通过img标签的src属性正确引入图片,需要多个img标签,因为我们需要多个图片文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11245.html

三. 第三步 —— 了解CSS 多栏(Multi-column) 属性文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11245.html

目标 : 了解CSS 多栏(Multi-column) 相关属性的基本使用,包括作用以及属性取值文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11245.html

小结 :文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11245.html

l column-count指定元素应该被分割的列数文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11245.html

l column-width指定列的宽度文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11245.html

l column-gap指定列与列之间的间隙文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11245.html

四. 第四步 —— 使用CSS 多栏属性完成瀑布流布局文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11245.html

目标 : 使用CSS多栏属性实现我们的图片瀑布流布局文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11245.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11245.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11245.html

小结 : 注意属性名与取值不要写错,每个css属性值后面都有一个英文状态的分号文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11245.html

总结文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11245.html

使用CSS3可以轻松实现瀑布流布局，但 Internet Explorer 9及更早 IE 版本浏览器不支持 column-count 属性。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11245.html

我们再来回顾一下，我们刚刚实现的步骤:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11245.html

1. 准备图片素材文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11245.html

2. 书写相应HTML结构 : 使用多张图片,放在同一个大盒子中文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11245.html

3. 了解CSS 多栏(Multi-column) 属性文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11245.html

– column-count 把指定盒子中的内容最多分为多少列,会根据浏览器的大小变化,但是不会超过我们指定的列数文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11245.html

– column-width 规定每列列宽最小为多少文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11245.html

– column-gap 规定每列的间隙文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11245.html

4. 使用CSS 多栏属性完成瀑布流布局文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11245.html