当前位置：首页 > JavaScript

js 瀑布流实现

2026-03-01 01:27:30JavaScript

瀑布流实现方法

瀑布流（Masonry Layout）是一种常见的网页布局方式，元素按照高度自适应排列，形成类似瀑布的效果。以下是几种实现瀑布流的方法：

使用纯 CSS 实现

CSS Grid 或 Flexbox 可以简单实现瀑布流效果，但需要固定列数。

js 瀑布流实现

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

.item {
  break-inside: avoid;
}

使用 JavaScript 动态计算

动态计算元素位置，实现更灵活的瀑布流布局。

js 瀑布流实现

function masonryLayout(containerSelector, itemSelector, columns) {
  const container = document.querySelector(containerSelector);
  const items = document.querySelectorAll(itemSelector);
  const containerWidth = container.offsetWidth;
  const columnWidth = containerWidth / columns;
  const heights = Array(columns).fill(0);

  items.forEach(item => {
    const minHeight = Math.min(...heights);
    const columnIndex = heights.indexOf(minHeight);
    item.style.position = 'absolute';
    item.style.width = `${columnWidth}px`;
    item.style.left = `${columnIndex * columnWidth}px`;
    item.style.top = `${minHeight}px`;
    heights[columnIndex] += item.offsetHeight;
  });

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

window.addEventListener('load', () => masonryLayout('.container', '.item', 3));
window.addEventListener('resize', () => masonryLayout('.container', '.item', 3));

使用第三方库

现有成熟的库可以快速实现瀑布流，如 Masonry.js 或 Isotope。

<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<script>
  var elem = document.querySelector('.container');
  var msnry = new Masonry(elem, {
    itemSelector: '.item',
    columnWidth: 200,
    gutter: 10
  });
</script>

响应式瀑布流

结合媒体查询实现响应式布局，根据屏幕宽度调整列数。

function getColumns() {
  if (window.innerWidth < 768) return 2;
  if (window.innerWidth < 1024) return 3;
  return 4;
}

window.addEventListener('resize', () => {
  masonryLayout('.container', '.item', getColumns());
});