HTML瀑布式布局是一種廣泛應用于網站設計的布局方法。與傳統的等寬列布局不同，瀑布式布局可以實現不同寬度的列，而且可以根據內容自動適應列寬。這種布局方式非常適合展示圖片、新聞列表和商品等巨量的信息。

<div id="waterfall">
<div class="item"><img src="image1.jpg"></div>
<div class="item"><img src="image2.jpg"></div>
<div class="item"><img src="image3.jpg"></div>
<div class="item"><img src="image4.jpg"></div>
<div class="item"><img src="image5.jpg"></div>
<div class="item"><img src="image6.jpg"></div>
<div class="item"><img src="image7.jpg"></div>
<div class="item"><img src="image8.jpg"></div>
<div class="item"><img src="image9.jpg"></div>
</div>

上面是一個簡單的瀑布式布局，它有一個名為waterfall的容器，里面包含了9個內容項，每個項都有相同的class，用于定制樣式。下面是一個基本的CSS樣式表，它定義了每個內容項的寬度、高度和邊距。

#waterfall {
display: flex;  /*設置容器為Flex布局*/
flex-wrap: wrap;  /*啟用容器自動換行*/
}
.item {
width: 300px;  /*設置每個內容項的寬度*/
margin: 10px;  /*設置每個內容項的左右邊距*/
background-color: #efefef;  /*設置每個內容項的背景顏色*/
box-shadow: 0 0 5px #999;  /*設置每個內容項的陰影*/
}
.item img {
display: block;  /*設置圖片為塊級元素*/
width: 100%;  /*設置圖片寬度為100%*/
}

在CSS樣式表中，我們使用Flex布局將容器設置為行式布局，并且啟用了自動換行功能，這樣就可以根據內容自動適應列寬了。每個內容項設置了相同的寬度、邊距和背景顏色，而圖片則設置為塊級元素，并且自動適應寬度。

瀑布式布局不僅可以用于展示圖片，還可以用于展示新聞列表、商品信息和用戶評論等內容，無論是哪種類型的內容，都可以通過瀑布式布局實現自適應顯示，提高用戶體驗。