瀑布流布局

封面图 • 2025-11-10 • JavaScript

“瀑布流布局”（Waterfall Layout）是一种常见的网页布局方式，常用于图片展示、新闻列表、商品浏览等场景。它的特点是内容以列的形式排列，每一列中的元素高度不一，整体呈现出一种“瀑布”般的视觉效果。

---

## 🌊 瀑布流布局的特点：

1. **多列布局**：内容按列排列，通常为2到3列。
2. **动态高度**：每个元素的高度不固定，根据内容自动调整。
3. **垂直对齐**：元素从上到下依次排列，尽量填满每一列的空白区域。
4. **响应式设计**：在不同屏幕尺寸下，列数和元素大小可以自适应变化。

---

## ✅ 常见实现方式

### 1. 使用 CSS 实现（如 `column` 属性）
```css
.container {
  column-count: 3; /* 列数 */
  column-gap: 20px;
}
```

⚠️ 注意：这种方式虽然简单，但无法控制每列的顺序，也不适合复杂的交互。

---

### 2. 使用 JavaScript 实现（推荐）

常用方法是使用 **Masonry** 或 **Isotope** 这类库，或者自己实现一个简单的瀑布流逻辑。

#### 示例：使用 JavaScript 自定义实现

```html
<div class="container">
  <div class="item" style="height: 100px;"></div>
  <div class="item" style="height: 150px;"></div>
  <div class="item" style="height: 80px;"></div>
  
</div>
```

```css
.container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.item {
  width: calc(33% - 10px); /* 3列 */
  background-color: #ccc;
}
```

```javascript
// 简单的瀑布流逻辑（可扩展）
function waterfall() {
  const container = document.querySelector('.container');
  const items = Array.from(container.children);
  const cols = 3;
  const colHeights = new Array(cols).fill(0);

items.forEach(item => {
    const minColIndex = colHeights.indexOf(Math.min(...colHeights));
    item.style.position = 'absolute';
    item.style.left = `${minColIndex * (100 / cols)}%`;
    item.style.top = `${colHeights[minColIndex]}px`;
    colHeights[minColIndex] += item.offsetHeight;
  });
}

window.addEventListener('load', waterfall);
window.addEventListener('resize', waterfall);
```

---

## 🔧 常用库推荐

| 库名     | 特点                         |
|----------|------------------------------|
| [Masonry](https://masonry.desandro.com/) | 功能强大，支持多种布局方式 |
| [Isotope](https://isotope.metafizzy.co/) | 支持过滤、排序、动画等 |
| [Packery](https://packery.metafizzy.co/) | 支持更复杂的布局模式 |

---

## 📱 响应式瀑布流

为了适配移动端，可以通过媒体查询或 JS 动态调整列数：

```css
@media (max-width: 768px) {
  .container {
    column-count: 2;
  }
}
```

---

## 🚀 总结

| 项目       | 内容 |
|------------|------|
| 定义       | 瀑布流布局是一种多列、动态高度的网页布局方式 |
| 优点       | 视觉美观、信息密度高、适合图片/内容展示 |
| 缺点       | 实现复杂度较高、对性能有一定影响 |
| 实现方式   | CSS `column`、JavaScript、Masonry 等 |

---

如果你有具体的实现需求（比如 Vue/React 中如何实现），我也可以提供更详细的代码示例！需要吗？