CSS3的流行使得瀑布流布局成為最受歡迎的網(wǎng)頁設(shè)計(jì)趨勢之一。瀑布流布局通過把內(nèi)容放置在不規(guī)則的列中來呈現(xiàn)網(wǎng)頁，效果非常視覺化。以下是如何使用CSS3來創(chuàng)建瀑布流布局的簡單步驟。

ul {
padding: 0;
margin: 0;
list-style: none;
column-count: 3;
column-gap: 10px;
}
li {
display: inline-block;
margin-bottom: 10px;
width: 100%;
}
img {
display: block;
width: 100%;
height: auto;
}

首先要?jiǎng)?chuàng)建一個(gè)無序列表（ul）來包含每個(gè)元素。在ul上使用“column-count”屬性可以定義多少列將用于布局，而“column-gap”定義了每個(gè)元素之間的間距。接下來，需要對(duì)每個(gè)元素（li）應(yīng)用樣式。

在這里，每個(gè)li顯示為“inline-block”，以便在在瀑布流布局中填滿每個(gè)列。同時(shí)，在每個(gè)Li上添加了一個(gè)“margin-bottom”來增加元素間的間距。為了使圖像在其自身之間垂直居中，將其顯式定義為塊級(jí)元素，分別給寬和高應(yīng)用100%和“自動(dòng)”。

當(dāng)然，上述CSS只是一個(gè)演示，具體樣式我們可以根據(jù)實(shí)際需求進(jìn)行設(shè)計(jì)調(diào)整，比如在圖片周圍添加自己所需的邊框，自定義間距等等。