CSS圖片瀑布流布局是一種常用的網頁布局方式，它可以讓圖片在網頁上自然流動、排列整齊、美觀大方。下面是一個簡單的示例：

<div class="waterfall">
<img src="image1.jpg">
<img src="image2.jpg">
<img src="image3.jpg">
<img src="image4.jpg">
<img src="image5.jpg">
<img src="image6.jpg">
</div>

以上代碼中，我們創建了一個名為"waterfall"的容器，然后在容器中放置了六張圖片。接下來，我們使用CSS布局讓這些圖片自動排列。

首先，先設置所有圖片為絕對定位，使其脫離文檔流：

.waterfall img {
position: absolute;
}

然后，我們需要通過CSS計算每張圖片的位置。一種常用的方法是使用JavaScript獲取到每張圖片的高度，然后再根據相應的高度來計算圖片位置。不過，這里我們使用純CSS解決問題。

我們可以將所有圖片分成N列，然后設置每列的寬度和間距。這樣，我們就可以通過CSS來計算每張圖片的位置了：

.waterfall {
column-count: N;
column-gap: G;
}
.waterfall img {
width: 100%;
margin-bottom: H;
}
.waterfall img:nth-of-type(2n) {
margin-right: R;
}

以上代碼中，我們首先將"waterfall"容器分為N列，并且設置了間距"G"。在圖片設置中，我們讓所有圖片的寬度都填滿列，然后設置每張圖片的底部間距"H"，這樣隔行排列就可以通過這個間距來實現。最后，我們使用:nth-of-type(n)偽類來讓每個奇數序號的圖片右側空出"R"的寬度。

當然，以上代碼還有很多可以優化的地方，比如圖片的高度可以通過JavaScript來動態計算，這樣就可以讓每個 column 的高度更加均衡。不過，以上代碼已經可以實現一個簡單的圖片瀑布流布局，讓我們的網頁更加生動有趣了。