干货来袭！web前端开发工程师必看之如何使用CSS3实现瀑布流效果？

具体来说,他们上看呵呵甚么是峡谷流产业布局效用,比如说B2C中文网站草莓街

设计图:

在两个大箱子里，置放数个垫子，垫子的大小不一能不完全一致，一般说来不那样，呈现出一类峡谷流的效用。

采用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>