瀑布流布局在相冊或商品列表中經常被使用，它是一種多列布局，每列的元素從上往下依次排列，非常適合展示圖片。HTML5 提供了一些新的特性，可以用來實現瀑布流布局。

下面是一個簡單的實現代碼：

<div id="waterfall">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<script>
// 獲取瀑布流容器和所有瀑布流項
var waterfall = document.getElementById("waterfall");
var items = waterfall.querySelectorAll(".item");
// 獲取每個瀑布流項的寬度
var itemWidth = items[0].offsetWidth;
// 獲取瀑布流容器的寬度
var containerWidth = waterfall.offsetWidth;
// 計算每行可以容納的瀑布流項數量
var columns = Math.floor(containerWidth / itemWidth);
// 定義瀑布流項的 top 和 left 值
var tops = new Array(columns).fill(0);
var lefts = new Array(columns).fill(0);
// 遍歷瀑布流項，并設置它們的樣式
for (var i = 0; i < items.length; i++) {
// 獲取最小高度的那一列
var minHeightColumn = tops.indexOf(Math.min.apply(null, tops));
// 設置瀑布流項的 top 和 left 值
items[i].style.position = "absolute";
items[i].style.top = tops[minHeightColumn] + "px";
items[i].style.left = lefts[minHeightColumn] + "px";
// 更新最小高度的那一列的高度
tops[minHeightColumn] += items[i].offsetHeight;
// 更新 left 值
lefts[minHeightColumn] += itemWidth;
}
</script>

上面的代碼包含了以下步驟：

• 獲取瀑布流容器和所有瀑布流項。
• 計算每行可以容納的瀑布流項數量。
• 定義瀑布流項的 top 和 left 值。
• 遍歷瀑布流項，并設置它們的樣式。

以上就是 HTML5 瀑布流實現代碼的簡單介紹。