当前位置：首页 > JavaScript

js 瀑布流实现

2026-04-04 02:00:16JavaScript

瀑布流布局实现方法

瀑布流（Masonry Layout）是一种流行的网页布局方式，常见于图片展示、商品列表等场景。以下是几种实现方法：

纯CSS实现（CSS Grid）

现代CSS的Grid布局可以较简单实现瀑布流效果：

js 瀑布流实现

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-auto-rows: 10px;
  gap: 15px;
}

.item {
  grid-row-end: span var(--row-span);
}

JavaScript部分需要计算每个元素的高度：

document.querySelectorAll('.item').forEach(item => {
  const height = item.clientHeight;
  const rowSpan = Math.ceil(height / 10);
  item.style.setProperty('--row-span', rowSpan);
});

使用JavaScript计算位置

传统JavaScript实现需要计算每个元素的位置：

js 瀑布流实现

function waterfall(container, items, columns) {
  const containerWidth = container.offsetWidth;
  const itemWidth = containerWidth / columns;
  let heights = new Array(columns).fill(0);

  items.forEach(item => {
    item.style.width = `${itemWidth}px`;
    const minHeight = Math.min(...heights);
    const columnIndex = heights.indexOf(minHeight);

    item.style.position = 'absolute';
    item.style.left = `${columnIndex * itemWidth}px`;
    item.style.top = `${minHeight}px`;

    heights[columnIndex] += item.offsetHeight;
  });

  container.style.height = `${Math.max(...heights)}px`;
}

使用现成库

推荐使用成熟的库如Masonry.js或Isotope：

// 使用Masonry
var masonry = new Masonry('.grid', {
  itemSelector: '.grid-item',
  columnWidth: 200,
  gutter: 20
});

// 图片加载后重新布局
imagesLoaded('.grid').on('progress', function() {
  masonry.layout();
});

响应式处理

添加窗口大小变化的响应处理：

let currentColumns = 3;

function calculateColumns() {
  return window.innerWidth < 768 ? 2 : 3;
}

window.addEventListener('resize', () => {
  const newColumns = calculateColumns();
  if(newColumns !== currentColumns) {
    currentColumns = newColumns;
    waterfall(container, items, currentColumns);
  }
});