当前位置：首页 > JavaScript

js实现瀑布流

2026-02-28 18:50:32JavaScript

实现瀑布流布局

瀑布流布局是一种常见的网页布局方式，适用于图片、卡片等内容的展示。通过 JavaScript 实现瀑布流布局，可以动态计算元素的位置，确保每一列的高度均衡。

基础实现步骤

HTML 结构

<div class="waterfall-container">
  <div class="waterfall-item">Item 1</div>
  <div class="waterfall-item">Item 2</div>
  <div class="waterfall-item">Item 3</div>
  <!-- 更多 item -->
</div>

CSS 样式

js实现瀑布流

.waterfall-container {
  position: relative;
  width: 100%;
}

.waterfall-item {
  position: absolute;
  width: 200px; /* 固定宽度 */
  margin-bottom: 20px; /* 间距 */
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

JavaScript 逻辑

function initWaterfall() {
  const container = document.querySelector('.waterfall-container');
  const items = document.querySelectorAll('.waterfall-item');
  const columnCount = 3; // 列数
  const gap = 20; // 间距
  const itemWidth = 200; // 与 CSS 中的宽度一致
  const containerWidth = container.offsetWidth;

  // 计算列宽（考虑间距）
  const columnWidth = (containerWidth - (gap * (columnCount - 1))) / columnCount;

  // 初始化列高数组
  const columnHeights = new Array(columnCount).fill(0);

  // 遍历每个 item，计算位置
  items.forEach(item => {
    // 找到当前高度最小的列
    const minHeight = Math.min(...columnHeights);
    const columnIndex = columnHeights.indexOf(minHeight);

    // 设置 item 的位置
    const left = columnIndex * (columnWidth + gap);
    const top = minHeight;

    item.style.width = `${columnWidth}px`;
    item.style.left = `${left}px`;
    item.style.top = `${top}px`;

    // 更新列高
    columnHeights[columnIndex] += item.offsetHeight + gap;
  });

  // 设置容器高度
  container.style.height = `${Math.max(...columnHeights)}px`;
}

// 初始化瀑布流
window.addEventListener('load', initWaterfall);
window.addEventListener('resize', initWaterfall);

动态加载更多内容

如果需要滚动加载更多内容，可以通过监听滚动事件动态添加新元素并重新计算布局。

js实现瀑布流

let isLoading = false;

function loadMoreItems() {
  if (isLoading) return;
  isLoading = true;

  // 模拟异步加载数据
  setTimeout(() => {
    const container = document.querySelector('.waterfall-container');
    const fragment = document.createDocumentFragment();

    // 添加新元素（示例）
    for (let i = 0; i < 10; i++) {
      const item = document.createElement('div');
      item.className = 'waterfall-item';
      item.textContent = `New Item ${i + 1}`;
      fragment.appendChild(item);
    }

    container.appendChild(fragment);
    initWaterfall(); // 重新计算布局
    isLoading = false;
  }, 1000);
}

// 监听滚动事件
window.addEventListener('scroll', () => {
  const scrollTop = document.documentElement.scrollTop;
  const windowHeight = window.innerHeight;
  const documentHeight = document.documentElement.scrollHeight;

  // 滚动到底部时加载更多
  if (scrollTop + windowHeight >= documentHeight - 100) {
    loadMoreItems();
  }
});

使用 CSS Grid 简化实现

如果不需要支持过旧的浏览器，可以使用 CSS Grid 简化瀑布流布局的实现。

CSS 样式

.waterfall-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 20px;
  grid-auto-flow: dense;
}

.waterfall-item {
  break-inside: avoid; /* 避免内容断裂 */
}

JavaScript 调整

function adjustGridLayout() {
  const container = document.querySelector('.waterfall-container');
  const items = document.querySelectorAll('.waterfall-item');

  items.forEach(item => {
    const rowHeight = Math.ceil(item.offsetHeight / 20) * 20;
    item.style.gridRowEnd = `span ${rowHeight}`;
  });
}

window.addEventListener('load', adjustGridLayout);
window.addEventListener('resize', adjustGridLayout);