首先,我們來看一下什麼是瀑布流佈局效果,比如電商網站 蘑菇街
原理圖:
在一個大盒子裡，放置多個小盒子，小盒子的大小可以不一致，長短不一樣，呈現一種瀑布流的效果。
使用CSS3S實現只需要如下4步:
1. 準備圖片素材
2. 書寫相應HTML結構
3. 瞭解CSS 多欄(Multi-column) 屬性
4. 使用CSS 多欄屬性完成瀑布流佈局
一、第一步 —— 準備圖片素材
目標 : 準備圖片素材,每張圖片的寬度長度最好都不要同樣大小的,另外,圖片寬度高度也不宜太大
小結 : 準備多張圖片素材,寬度高度不宜超過1000像素
二、第二步 —— 書寫相應HTML結構
目標 : 在HTML頁面中插入多個圖片標籤img,並正確通過src屬性引入鼠標
<title>Document/<title>
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
小結 : 通過img標籤的src屬性正確引入圖片,需要多個img標籤,因為我們需要多個圖片
三、第三步 —— 瞭解CSS 多欄(Multi-column) 屬性
小結 :
l column-count指定元素應該被分割的列數
l column-width指定列的寬度
l column-gap指定列與列之間的間隙
四、第四步 —— 使用CSS 多欄屬性完成瀑布流佈局
目標 : 使用CSS多欄屬性實現我們的圖片瀑布流佈局
<title>Document/<title>
<style><br> /*清除所有標籤的內外邊距*/<br> *{<br> margin: 0;<br> padding: 0;<br> }<br> /*選中.box標籤*/<br> .box{<br> /*把.box中的內容最多分為4列,會根據瀏覽器的大小變化,但是不會超過4列*/<br> column-count: 4;<br> /*規定每列列寬最小為200px*/<br> column-width: 200px;<br> /*規定每列的間隙為1em*/<br> column-gap: 1em;<br> /*盒子寬度為1000px*/<br> width: 1000px;<br> /*實現盒子水平居中*/<br> margin:0 auto;<br> }<br> /*選中.box下的所有img標籤*/<br> .box img{<br> /*上下左右5px的內填充*/<br> padding:5px;<br> /*上下左右5px的外邊距*/<br> margin:5px;<br> /*圓角邊框*/<br> border-radius:5px;<br> /*盒子陰影*/<br> box-shadow:0px 0px 5px gray;<br> }<br> /<style>
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
小結 : 注意屬性名與取值不要寫錯,每個css屬性值後面都有一個英文狀態的分號
總結
使用CSS3可以輕鬆實現瀑布流佈局，但 Internet Explorer 9及更早 IE 版本瀏覽器不支持 column-count 屬性。
我們再來回顧一下，我們剛剛實現的步驟:
1. 準備圖片素材
2. 書寫相應HTML結構 : 使用多張圖片,放在同一個大盒子中
3. 瞭解CSS 多欄(Multi-column) 屬性
– column-count 把指定盒子中的內容最多分為多少列,會根據瀏覽器的大小變化,但是不會超過我們指定的列數
– column-width 規定每列列寬最小為多少
– column-gap 規定每列的間隙
4. 使用CSS 多欄屬性完成瀑布流佈局
閱讀更多 黑馬程序員 的文章
