CSS相冊瀑布流是一種流行的設計方法，可讓您創建獨特而美觀的網頁相冊。通過以下步驟，我們將向您展示如何使用CSS創建相冊瀑布流效果。

/* CSS代碼開始 */
/* 設置相冊容器 */
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-gap: 20px;
}
/* 設置相冊項 */
.gallery-item {
overflow: hidden;
position: relative;
}
/* 確保所有圖片的寬度一樣 */
.gallery-item img {
width: 100%;
height: auto;
}
/* 設置圖片hover效果 */
.gallery-item:hover .overlay {
opacity: 1;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
transition: opacity 0.2s ease-in-out;
}
/* 添加相冊描述文字 */
.gallery-item .overlay-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
}
/* CSS代碼結束 */

以上代碼包含三個部分：設置相冊容器、設置相冊項和設置圖片hover效果。在設置相冊容器時，我們使用了CSS網格布局功能。通過設置網格列的數量和最小和最大列寬度，我們可以創建適應不同屏幕大小的相冊。我們還為相冊項添加了一個overlay（遮罩）效果，該效果使用CSS絕對定位和透明度過渡屬性來實現。利用該效果，我們可以在相冊項上顯示更多信息，例如圖片描述或點擊該圖片跳轉到某個頁面。最后，我們添加了描述文字居中顯示。通過這些CSS規則，我們可以創建一個簡單而漂亮的相冊瀑布流效果。