Web前端培訓(xùn)：如何使用CSS3實(shí)現(xiàn)瀑布流效果?

首先,我們來看一下什么是瀑布流布局效果,比如電商網(wǎng)站：蘑菇街。

原理圖：

在一個(gè)大盒子里，放置多個(gè)小盒子，小盒子的大小可以不一致，長短不一樣，呈現(xiàn)一種瀑布流的效果。

使用CSS3S實(shí)現(xiàn)只需要如下4步:

1. 準(zhǔn)備圖片素材

2. 書寫相應(yīng)HTML結(jié)構(gòu)

3. 了解CSS 多欄(Multi-column) 屬性

4. 使用CSS 多欄屬性完成瀑布流布局

一. 第一步 —— 準(zhǔn)備圖片素材

目標(biāo) : 準(zhǔn)備圖片素材,每張圖片的寬度長度最好都不要同樣大小的,另外,圖片寬度高度也不宜太大

小結(jié) : 準(zhǔn)備多張圖片素材,寬度高度不宜超過1000像素

二. 第二步 —— 書寫相應(yīng)HTML結(jié)構(gòu)

目標(biāo) : 在HTML頁面中插入多個(gè)圖片標(biāo)簽img,并正確通過src屬性引入鼠標(biāo)

小結(jié) : 通過img標(biāo)簽的src屬性正確引入圖片,需要多個(gè)img標(biāo)簽,因?yàn)槲覀冃枰鄠€(gè)圖片

三. 第三步 —— 了解CSS 多欄(Multi-column) 屬性

目標(biāo) : 了解CSS 多欄(Multi-column) 相關(guān)屬性的基本使用,包括作用以及屬性取值

小結(jié) :

l column-count指定元素應(yīng)該被分割的列數(shù)

l column-width指定列的寬度

l column-gap指定列與列之間的間隙

四. 第四步 —— 使用CSS 多欄屬性完成瀑布流布局

目標(biāo) : 使用CSS多欄屬性實(shí)現(xiàn)我們的圖片瀑布流布局

小結(jié) : 注意屬性名與取值不要寫錯(cuò),每個(gè)css屬性值后面都有一個(gè)英文狀態(tài)的分號(hào)

總結(jié)

使用CSS3可以輕松實(shí)現(xiàn)瀑布流布局，但 Internet Explorer 9及更早 IE 版本瀏覽器不支持 column-count 屬性。

我們再來回顧一下，我們剛剛實(shí)現(xiàn)的步驟:

1. 準(zhǔn)備圖片素材

2. 書寫相應(yīng)HTML結(jié)構(gòu) : 使用多張圖片,放在同一個(gè)大盒子中

3. 了解CSS 多欄(Multi-column) 屬性

– column-count 把指定盒子中的內(nèi)容最多分為多少列,會(huì)根據(jù)瀏覽器的大小變化,但是不會(huì)超過我們指定的列數(shù)

– column-width 規(guī)定每列列寬最小為多少

– column-gap 規(guī)定每列的間隙

4. 使用CSS 多欄屬性完成瀑布流布局