瀑布流布局

Ynov

于 2025-06-07 11:17:03 发布

阅读量459

点赞数 12

文章标签： javascript 开发语言前端 css

本文链接：https://blog.csdn.net/2503_91259466/article/details/148492699

版权

瀑布流布局实现方案

瀑布流布局（Masonry Layout）是一种流行的网页布局方式，特点是元素宽度固定但高度不一，像瀑布一样垂直排列。以下是几种实现瀑布流布局的方法：

1. 纯CSS实现（CSS Grid 或 CSS Columns）

使用CSS Grid（现代浏览器支持）

html

<div class="masonry-grid">
  <div class="grid-item">...</div>
  <div class="grid-item">...</div>
  <!-- 更多项目 -->
</div>

css

.masonry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-gap: 15px;
  grid-auto-rows: 10px; /* 控制行高基数 */
}

.grid-item {
  grid-row-end: span var(--row-span); /* 通过JS计算设置 */
}

使用CSS Multi-column（兼容性更好）

css

.masonry-grid {
  column-count: 3;
  column-gap: 15px;
}

.grid-item {
  break-inside: avoid;
  margin-bottom: 15px;
}

@media (max-width: 768px) {
  .masonry-grid {
    column-count: 2;
  }
}

2. 使用jQuery插件（Masonry）

html

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js"></script>

<div class="grid">
  <div class="grid-sizer"></div>
  <div class="grid-item">...</div>
  <div class="grid-item">...</div>
  <!-- 更多项目 -->
</div>

css

.grid {
  margin: 0 auto;
}
.grid-sizer,
.grid-item {
  width: 32%;
  margin-bottom: 15px;
}
.grid-item {
  float: left;
}
.grid-item img {
  width: 100%;
  display: block;
}

javascript

$(document).ready(function() {
  $('.grid').masonry({
    itemSelector: '.grid-item',
    columnWidth: '.grid-sizer',
    percentPosition: true
  });
  
  // 当内容加载完成后重新布局
  $('.grid').imagesLoaded().progress(function() {
    $('.grid').masonry('layout');
  });
});

3. 使用现代JavaScript库（Isotope）

html

<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>

<div class="grid">
  <div class="grid-item">...</div>
  <div class="grid-item">...</div>
  <!-- 更多项目 -->
</div>

javascript

var iso = new Isotope('.grid', {
  itemSelector: '.grid-item',
  masonry: {
    columnWidth: 200,
    gutter: 20
  }
});

4. 纯JavaScript实现

javascript

function waterfall(container, box, cols) {
  const containerEl = document.querySelector(container);
  const boxEls = document.querySelectorAll(box);
  const containerWidth = containerEl.offsetWidth;
  const boxWidth = boxEls[0].offsetWidth;
  const colsNum = cols || Math.floor(containerWidth / boxWidth);
  
  // 设置容器宽度
  containerEl.style.width = colsNum * boxWidth + 'px';
  
  // 初始化高度数组
  const heightArr = [];
  for (let i = 0; i < colsNum; i++) {
    heightArr[i] = 0;
  }
  
  // 布局每个项目
  boxEls.forEach(item => {
    const minHeight = Math.min(...heightArr);
    const index = heightArr.indexOf(minHeight);
    
    item.style.position = 'absolute';
    item.style.left = index * boxWidth + 'px';
    item.style.top = minHeight + 'px';
    
    heightArr[index] += item.offsetHeight;
  });
  
  // 设置容器高度
  containerEl.style.height = Math.max(...heightArr) + 'px';
}

// 使用
window.onload = function() {
  waterfall('.masonry-container', '.masonry-item', 3);
};

window.onresize = function() {
  waterfall('.masonry-container', '.masonry-item', 3);
};

响应式设计建议

css

/* 响应式调整列数 */
@media (max-width: 1200px) {
  .masonry-grid {
    column-count: 4;
  }
}
@media (max-width: 992px) {
  .masonry-grid {
    column-count: 3;
  }
}
@media (max-width: 768px) {
  .masonry-grid {
    column-count: 2;
  }
}
@media (max-width: 576px) {
  .masonry-grid {
    column-count: 1;
  }
}