首先,我們來看一下什么是瀑布流布局效果,比如電商網站 蘑菇街

原理圖:

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

使用CSS3S實現只需要如下4步:

1. 準備圖片素材

2. 書寫相應HTML結構

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

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

一、第一步 —— 準備圖片素材

目標 : 準備圖片素材,每張圖片的寬度長度最好都不要同樣大小的,另外,圖片寬度高度也不宜太大

小結 : 準備多張圖片素材,寬度高度不宜超過1000像素

二、第二步 —— 書寫相應HTML結構

目標 : 在HTML頁面中插入多個圖片標簽img,并正確通過src屬性引入鼠標

Document

小結 : 通過img標簽的src屬性正確引入圖片,需要多個img標簽,因為我們需要多個圖片

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

小結 :

l column-count指定元素應該被分割的列數

l column-width指定列的寬度

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

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

目標 : 使用CSS多欄屬性實現我們的圖片瀑布流布局

Document

小結 : 注意屬性名與取值不要寫錯,每個css屬性值后面都有一個英文狀態的分號

總結

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

我們再來回顧一下，我們剛剛實現的步驟:

1. 準備圖片素材

2. 書寫相應HTML結構 : 使用多張圖片,放在同一個大盒子中

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

– column-count 把指定盒子中的內容最多分為多少列,會根據瀏覽器的大小變化,但是不會超過我們指定的列數

– column-width 規定每列列寬最小為多少

– column-gap 規定每列的間隙

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

總結

以上是生活随笔為你收集整理的css3 下边框缓缓划过_干货来袭！web前端开发工程师必看之如何使用CSS3实现瀑布流效果？...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。