要實現瀑布流布局，可以使用JavaScript結合CSS來操作元素的位置和大小。

1. 首先，創建一個HTML結構，其中包含需要展示的元素。每個元素可以使用CSS設置寬度和高度，以及其他樣式。

2. 在JavaScript中，首先獲取所有需要展示的元素，并計算每個元素的寬度。

var elements = document.getElementsByClassName('item');
var container = document.getElementById('container');
// 計算每個元素的寬度
var columnWidth = 200; // 你可以根據需要調整寬度
var numColumns = Math.floor(container.offsetWidth / columnWidth);
// 設置每個元素的寬度
for (var i = 0; i < elements.length; i++) {
elements[i].style.width = columnWidth + 'px';
}

3. 創建一個數組columns，用于存儲每一列的高度。

4. 遍歷所有元素，將元素放置到高度最小的列中，并更新該列的高度。

var columns = [];
// 初始化每一列的高度
for (var i = 0; i < numColumns; i++) {
columns[i] = 0;
}
// 遍歷所有元素
for (var i = 0; i < elements.length; i++) {
var columnIndex = i % numColumns; // 計算當前元素應該放置在哪一列
var columnHeight = columns[columnIndex]; // 獲取該列的當前高度
// 設置元素的位置
elements[i].style.position = 'absolute';
elements[i].style.left = columnIndex * columnWidth + 'px';
elements[i].style.top = columnHeight + 'px';
// 更新該列的高度
columns[columnIndex] = columnHeight + elements[i].offsetHeight;
}

5. 最后，設置容器的高度為最高列的高度，以確保所有元素都能被正確展示。

// 設置容器的高度為最高列的高度
container.style.height = Math.max.apply(null, columns) + 'px';

通過上述步驟，你可以實現一個簡單的瀑布流布局。當窗口大小改變時，你也可以通過監聽resize事件來重新計算元素的位置和容器的高度。