CSS圖片瀑布流,又稱為Masonry布局,是一種網頁布局方式,它的特點是圖片元素不規則排列,整個布局感覺像瀑布般流動,因而得名瀑布流。
實現Masonry布局主要依靠CSS3屬性的使用,其中包括彈性布局、多列布局和定位等技術。我們來看一個簡單的代碼示例:
.masonry {
column-count: 3;
column-gap: 10px;
}
.masonry li {
display: inline-block;
width: 100%;
margin-bottom: 10px;
}
.masonry img {
width: 100%;
height: auto;
}
以上代碼中,我們使用了column-count屬性來設置列數,column-gap屬性來設置列間隔。在li元素內,我們將其設為inline-block類型,并設置寬度為100%,這樣每列就會自動調整大小以適應父容器,同時每個元素之間會有間隔
最后,我們使用width和height屬性使每個img元素占滿其父容器,從而保證圖片大小一致,整體視覺效果更加統一。
在實際開發中,為了達到更好的效果,還可以繼續添加hover效果、響應式布局等,讓Masonry布局更加靈活多變。