CSS问题：如何实现瀑布流布局？

瀑布流布局是一种新兴的网页版面布局方式，其特点是按列排列网页元素，而每一列的高度由该列中元素最大的一个决定，类似水流下山的景象，故称为瀑布流。

下面是一个简单的瀑布流布局的实现方法：

1. 使用CSS3的column属性。

.waterfall {
    column-count: 5;
    column-gap: 10px;
}
 
.waterfall .item {
    break-inside: avoid;
    margin-bottom: 10px;
}

<div class="waterfall">
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
    <!-- ...更多的项 -->
</div>

2. 使用JavaScript和CSS实现。

JavaScript用于测量图片高度并调整布局，CSS用于定位。

.waterfall {
    position: relative;
}
 
.waterfall .item {
    position: absolute;
    left: 0;
    top: 0;
}

function createWaterfall(container) {
    var columns = [];
    var items = container.getElementsByClassName('item');
 
    for (var i = 0; i < items.length; i++) {
        var column = columns.length ? columns.shift() : createColumn();
        column.appendChild(items[i]);
        columns.push(column);
    }
 
    function createColumn() {
        var column = document.createElement('div');
        column.className = 'column';
        container.appendChild(column);
        return column;
    }
}
 
createWaterfall(document.querySelector('.waterfall'));

<div class="waterfall">
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
    <!-- ...更多的项 -->
</div>

这两种方法都能实现瀑布流布局，但第一种方法更简单，适合内容固定的情况。如果需要处理动态内容或者需要更复杂的交互，可以选择第二种方法。