1. 首页
  2. IT资讯

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

“u003Cdivu003Eu003Cpu003E首先,我们来看一下什么是瀑布流布局效果,比如电商网站 蘑菇街u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F56f7e8329e534ab087929a44247ea668″ img_width=”560″ img_height=”283″ alt=”干货来袭!web前端开发工程师必看之如何使用CSS3实现瀑布流效果?” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E原理图:u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002Ff361baf726d642cba0e7485d98cfed1b” img_width=”560″ img_height=”629″ alt=”干货来袭!web前端开发工程师必看之如何使用CSS3实现瀑布流效果?” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E在一个大盒子里,放置多个小盒子,小盒子的大小可以不一致,长短不一样,呈现一种瀑布流的效果。u003Cu002Fpu003Eu003Cpu003E使用CSS3S实现只需要如下4步:u003Cu002Fpu003Eu003Cpu003E1. 准备图片素材u003Cu002Fpu003Eu003Cpu003E2. 书写相应HTML结构u003Cu002Fpu003Eu003Cpu003E3. 了解CSS 多栏(Multi-column) 属性u003Cu002Fpu003Eu003Cpu003E4. 使用CSS 多栏属性完成瀑布流布局u003Cu002Fpu003Eu003Cpu003E一、第一步 —— 准备图片素材u003Cu002Fpu003Eu003Cpu003E目标 : 准备图片素材,每张图片的宽度长度最好都不要同样大小的,另外,图片宽度高度也不宜太大u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002Fpgc-imageu002Fc33329eee61e405cbc1d8da3af97c43d” img_width=”560″ img_height=”401″ alt=”干货来袭!web前端开发工程师必看之如何使用CSS3实现瀑布流效果?” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E小结 : 准备多张图片素材,宽度高度不宜超过1000像素u003Cu002Fpu003Eu003Cpu003E二、第二步 —— 书写相应HTML结构u003Cu002Fpu003Eu003Cpu003E目标 : 在HTML页面中插入多个图片标签img,并正确通过src属性引入鼠标u003Cu002Fpu003Eu003Cpreu003E<!DOCTYPE html>u003Cbru003E<html lang=”en”>u003Cbru003E<head>u003Cbru003E <meta charset=”UTF-8″>u003Cbru003E <title>Document<u002Ftitle>u003Cbru003E<u002Fhead>u003Cbru003E<body>u003Cbru003E <div class=”box”>u003Cbru003E <img src=”imagesu002FP_001.jpg”u002F>u003Cbru003E <img src=”imagesu002FP_002.jpg”u002F>u003Cbru003E <img src=”imagesu002FP_003.jpg”u002F>u003Cbru003E <img src=”imagesu002FP_004.jpg”u002F>u003Cbru003E <img src=”imagesu002FP_005.jpg”u002F>u003Cbru003E <img src=”imagesu002FP_006.jpg”u002F>u003Cbru003E <img src=”imagesu002FP_007.jpg”u002F>u003Cbru003E <img src=”imagesu002FP_008.jpg”u002F>u003Cbru003E <img src=”imagesu002FP_009.jpg”u002F>u003Cbru003E <img src=”imagesu002FP_010.jpg”u002F>u003Cbru003E <img src=”imagesu002FP_011.jpg”u002F>u003Cbru003E <img src=”imagesu002FP_012.jpg”u002F>u003Cbru003E <img src=”imagesu002FP_013.jpg”u002F>u003Cbru003E <img src=”imagesu002FP_014.jpg”u002F>u003Cbru003E <img src=”imagesu002FP_015.jpg”u002F>u003Cbru003E <img src=”imagesu002FP_016.jpg”u002F>u003Cbru003E <img src=”imagesu002FP_017.jpg”u002F>u003Cbru003E <img src=”imagesu002FP_018.jpg”u002F>u003Cbru003E <img src=”imagesu002FP_019.jpg”u002F>u003Cbru003E <img src=”imagesu002FP_020.jpg”u002F>u003Cbru003E <u002Fdiv>u003Cbru003E<u002Fbody>u003Cbru003E<u002Fhtml>u003Cbru003Eu003Cu002Fpreu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002Fpgc-imageu002F7106a21b50ae4b40a3a7ba786398a82c” img_width=”560″ img_height=”397″ alt=”干货来袭!web前端开发工程师必看之如何使用CSS3实现瀑布流效果?” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E小结 : 通过img标签的src属性正确引入图片,需要多个img标签,因为我们需要多个图片u003Cu002Fpu003Eu003Cpu003E三、第三步 —— 了解CSS 多栏(Multi-column) 属性u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002Fpgc-imageu002F820318e647a94242a5890554938ea8e4″ img_width=”706″ img_height=”267″ alt=”干货来袭!web前端开发工程师必看之如何使用CSS3实现瀑布流效果?” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E小结 :u003Cu002Fpu003Eu003Cpu003El column-count指定元素应该被分割的列数u003Cu002Fpu003Eu003Cpu003El column-width指定列的宽度u003Cu002Fpu003Eu003Cpu003El column-gap指定列与列之间的间隙u003Cu002Fpu003Eu003Cpu003E四、第四步 —— 使用CSS 多栏属性完成瀑布流布局u003Cu002Fpu003Eu003Cpu003E目标 : 使用CSS多栏属性实现我们的图片瀑布流布局u003Cu002Fpu003Eu003Cpreu003E<!DOCTYPE html>u003Cbru003E<html lang=”en”>u003Cbru003E<head>u003Cbru003E <meta charset=”UTF-8″>u003Cbru003E <title>Document<u002Ftitle>u003Cbru003E <style type=”textu002Fcss”>u003Cbru003E u002F*清除所有标签的内外边距*u002Fu003Cbru003E *{u003Cbru003E margin: 0;u003Cbru003E padding: 0;u003Cbru003E }u003Cbru003E u002F*选中.box标签*u002Fu003Cbru003E .box{u003Cbru003E u002F*把.box中的内容最多分为4列,会根据浏览器的大小变化,但是不会超过4列*u002Fu003Cbru003E column-count: 4;u003Cbru003E u002F*规定每列列宽最小为200px*u002Fu003Cbru003E column-width: 200px;u003Cbru003E u002F*规定每列的间隙为1em*u002Fu003Cbru003E column-gap: 1em;u003Cbru003E u002F*盒子宽度为1000px*u002Fu003Cbru003E width: 1000px;u003Cbru003E u002F*实现盒子水平居中*u002Fu003Cbru003E margin:0 auto;u003Cbru003E }u003Cbru003E u002F*选中.box下的所有img标签*u002Fu003Cbru003E .box img{u003Cbru003E u002F*上下左右5px的内填充*u002Fu003Cbru003E padding:5px;u003Cbru003E u002F*上下左右5px的外边距*u002Fu003Cbru003E margin:5px;u003Cbru003E u002F*圆角边框*u002Fu003Cbru003E border-radius:5px;u003Cbru003E u002F*盒子阴影*u002Fu003Cbru003E box-shadow:0px 0px 5px gray;u003Cbru003E }u003Cbru003E <u002Fstyle>u003Cbru003E<u002Fhead>u003Cbru003E<body>u003Cbru003E <div class=”box”>u003Cbru003E <img src=”imagesu002FP_001.jpg”u002F>u003Cbru003E <img src=”imagesu002FP_002.jpg”u002F>u003Cbru003E <img src=”imagesu002FP_003.jpg”u002F>u003Cbru003E <img src=”imagesu002FP_004.jpg”u002F>u003Cbru003E <img src=”imagesu002FP_005.jpg”u002F>u003Cbru003E <img src=”imagesu002FP_006.jpg”u002F>u003Cbru003E <img src=”imagesu002FP_007.jpg”u002F>u003Cbru003E <img src=”imagesu002FP_008.jpg”u002F>u003Cbru003E <img src=”imagesu002FP_009.jpg”u002F>u003Cbru003E <img src=”imagesu002FP_010.jpg”u002F>u003Cbru003E <img src=”imagesu002FP_011.jpg”u002F>u003Cbru003E <img src=”imagesu002FP_012.jpg”u002F>u003Cbru003E <img src=”imagesu002FP_013.jpg”u002F>u003Cbru003E <img src=”imagesu002FP_014.jpg”u002F>u003Cbru003E <img src=”imagesu002FP_015.jpg”u002F>u003Cbru003E <img src=”imagesu002FP_016.jpg”u002F>u003Cbru003E <img src=”imagesu002FP_017.jpg”u002F>u003Cbru003E <img src=”imagesu002FP_018.jpg”u002F>u003Cbru003E <img src=”imagesu002FP_019.jpg”u002F>u003Cbru003E <img src=”imagesu002FP_020.jpg”u002F>u003Cbru003E <u002Fdiv>u003Cbru003E<u002Fbody>u003Cbru003E<u002Fhtml>u003Cbru003Eu003Cu002Fpreu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F12351cb83da74696858be310280a4eec” img_width=”560″ img_height=”579″ alt=”干货来袭!web前端开发工程师必看之如何使用CSS3实现瀑布流效果?” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E小结 : 注意属性名与取值不要写错,每个css属性值后面都有一个英文状态的分号u003Cu002Fpu003Eu003Cpu003E总结u003Cu002Fpu003Eu003Cpu003E使用CSS3可以轻松实现瀑布流布局,但 Internet Explorer 9及更早 IE 版本浏览器不支持 column-count 属性。u003Cu002Fpu003Eu003Cpu003E我们再来回顾一下,我们刚刚实现的步骤:u003Cu002Fpu003Eu003Cpu003E1. 准备图片素材u003Cu002Fpu003Eu003Cpu003E2. 书写相应HTML结构 : 使用多张图片,放在同一个大盒子中u003Cu002Fpu003Eu003Cpu003E3. 了解CSS 多栏(Multi-column) 属性 u003Cu002Fpu003Eu003Cpu003E– column-count 把指定盒子中的内容最多分为多少列,会根据浏览器的大小变化,但是不会超过我们指定的列数u003Cu002Fpu003Eu003Cpu003E– column-width 规定每列列宽最小为多少u003Cu002Fpu003Eu003Cpu003E– column-gap 规定每列的间隙u003Cu002Fpu003Eu003Cpu003E4. 使用CSS 多栏属性完成瀑布流布局u003Cu002Fpu003Eu003Cu002Fdivu003E”

原文始发于:干货来袭!web前端开发工程师必看之如何使用CSS3实现瀑布流效果?

主题测试文章,只做测试使用。发布者:玩家L-,转转请注明出处:http://www.cxybcw.com/26912.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code