怎样在HTML中实现瀑布流布局

<div class="container">
    <div class="item"><img src="image1.jpg" alt="Image 1"></div>
    <div class="item"><img src="image2.jpg" alt="Image 2"></div>
    <div class="item"><img src="image3.jpg" alt="Image 3"></div>
    <!-- 更多项目 -->
</div>

.container {
    column-gap: 10px;
}

.item {
    display: inline-block;
    margin: 0 0 10px;
    width: 100%;
}

document.addEventListener('DOMContentLoaded', function() {
    var container = document.querySelector('.container');
    var items = document.querySelectorAll('.item');
    var columnCount = 3; // 你可以根据需要调整列数
    var columns = [];

    for (var i = 0; i < columnCount; i++) {
        columns.push(0);
    }

    items.forEach(function(item) {
        var minColumnIndex = columns.indexOf(Math.min.apply(null, columns));
        item.style.position = 'absolute';
        item.style.top = columns[minColumnIndex] + 'px';
        item.style.left = (minColumnIndex * (100 / columnCount)) + '%';
        columns[minColumnIndex] += item.offsetHeight + 10; // 10px 的 margin-bottom
    });

    container.style.height = Math.max.apply(null, columns) + 'px';
});