html如何制作瀑布流瀑布流布局设计教程-html教程-PHP中文网

html如何制作瀑布流瀑布流布局设计教程

尼克

发布： 2025-06-26 17:25:02

原创

425人浏览过

瀑布流的实现主要有两种方式：css3和javascript。1.css3通过column-count和column-gap属性实现多栏布局，适用于静态内容，代码简单但控制力弱；2.javascript通过计算每列高度并动态定位图片，灵活可控，适合动态内容。此外，还需处理图片加载失败、实现懒加载（监听滚动事件并加载可视区域内的图片）以及性能优化（如图片压缩、减少dom操作、使用节流函数等）。两种方式可根据实际需求选择使用。

html如何制作瀑布流瀑布流布局设计教程

瀑布流，简单说就是参差不齐的多栏布局，图片高度不一，像瀑布一样倾泻而下。关键在于让页面看起来灵动不死板，又能高效利用空间。

直接输出解决方案即可：

要实现瀑布流，核心在于计算每张图片应该放在哪一列，以及如何动态调整这些图片的位置。这里主要介绍两种常见的实现方式：CSS3 和 JavaScript。

立即学习“前端免费学习笔记（深入）”；

CSS3 实现（ masonry.js 替代方案）

CSS3 的 column-count 和 column-gap 属性可以快速实现基本的瀑布流，但控制力较弱，可能出现图片排序混乱的情况。

<div class="waterfall">
  @@##@@
  @@##@@
  @@##@@
  ...
</div>

<style>
.waterfall {
  column-count: 3; /* 设置列数 */
  column-gap: 10px; /* 设置列间距 */
}

.waterfall img {
  width: 100%; /* 图片宽度撑满容器 */
  margin-bottom: 10px; /* 图片间距 */
  break-inside: avoid; /* 避免图片被分割在两列 */
}
</style>

登录后复制

这种方式简单粗暴，但对图片的加载顺序和高度变化不敏感，适合静态内容或者对排序要求不高的场景。break-inside: avoid 是关键，它可以避免图片被截断。

JavaScript 实现（更灵活的控制）

JavaScript 实现的核心思路是：

确定列数： 根据容器宽度和图片宽度计算出列数。
维护列高数组： 创建一个数组，记录每一列当前的高度。
计算图片位置： 遍历图片，找到高度最小的那一列，将图片添加到该列，并更新该列的高度。
动态调整： 监听窗口大小变化和图片加载完成事件，重新计算布局。

<div class="waterfall" id="waterfall">
  @@##@@
  @@##@@
  @@##@@
  ...
</div>

<style>
.waterfall {
  position: relative; /* 必须设置 */
}

.waterfall img {
  position: absolute; /* 绝对定位 */
  width: 200px; /* 固定图片宽度 */
}
</style>

<script>
const waterfall = document.getElementById('waterfall');
const images = waterfall.getElementsByTagName('img');
const imageWidth = 200; // 图片宽度
let columnCount = 0;
let columnHeights = [];

function calculateLayout() {
  const containerWidth = waterfall.offsetWidth;
  columnCount = Math.floor(containerWidth / imageWidth);
  columnHeights = new Array(columnCount).fill(0); // 初始化列高数组
}

function positionImages() {
  for (let i = 0; i < images.length; i++) {
    let minHeight = Math.min(...columnHeights);
    let columnIndex = columnHeights.indexOf(minHeight);

    images[i].style.left = columnIndex * imageWidth + 'px';
    images[i].style.top = minHeight + 'px';

    columnHeights[columnIndex] += images[i].offsetHeight + 10; // 加上图片高度和间距
  }

  // 设置容器高度，避免塌陷
  waterfall.style.height = Math.max(...columnHeights) + 'px';
}

window.onload = function() {
  calculateLayout();
  positionImages();
}

window.addEventListener('resize', function() {
  calculateLayout();
  positionImages();
});
</script>

登录后复制

这段代码的关键点在于 position: absolute 和 left、top 属性的计算。需要注意的是，图片宽度需要固定，否则计算会变得复杂。同时，需要处理图片加载完成后的重新布局，可以使用 img.onload 事件。

瀑布流图片加载不出来怎么办？

图片加载不出来，可能是网络问题，也可能是代码逻辑问题。

检查网络： 确认图片链接是否有效，尝试在浏览器中直接访问图片链接。
图片路径： 检查图片路径是否正确，相对路径和绝对路径是否混淆。
加载顺序： 如果图片数量很多，可以考虑使用懒加载，避免一次性加载所有图片，导致页面卡顿甚至崩溃。
错误处理： 添加图片加载失败的处理逻辑，例如显示默认图片或提示信息。

// 图片加载失败处理
images[i].onerror = function() {
  this.src = 'default.jpg'; // 显示默认图片
};

登录后复制

瀑布流如何实现懒加载？

懒加载的核心思想是：只加载可视区域内的图片，当图片滚动到可视区域时才加载。

监听滚动事件： 监听 window.onscroll 事件。
判断是否在可视区域： 判断图片是否进入可视区域，可以使用 getBoundingClientRect() 方法获取图片的位置信息。
替换图片链接： 将 data-src 属性中的图片链接赋值给 src 属性，触发图片加载。

@@##@@

<script>
function lazyLoad() {
  const images = document.querySelectorAll('img[data-src]');
  for (let i = 0; i < images.length; i++) {
    if (isInViewport(images[i])) {
      images[i].src = images[i].dataset.src;
      images[i].removeAttribute('data-src'); // 避免重复加载
    }
  }
}

function isInViewport(element) {
  const rect = element.getBoundingClientRect();
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
}

window.addEventListener('scroll', lazyLoad);
window.addEventListener('resize', lazyLoad);
window.addEventListener('load', lazyLoad); // 页面加载完成时执行一次
</script>

登录后复制

placeholder.gif 是一张占位图片，可以是一个简单的 loading 图标。 data-src 属性用于存储真实的图片链接。

瀑布流如何优化性能？

瀑布流的性能瓶颈主要在于大量的 DOM 操作和图片加载。

图片优化： 使用合适的图片格式（webp），压缩图片大小，使用 CDN 加速图片加载。
减少 DOM 操作： 避免频繁的 DOM 操作，可以使用节流或防抖来限制 resize 和 scroll 事件的触发频率。
虚拟滚动： 对于数据量非常大的瀑布流，可以考虑使用虚拟滚动，只渲染可视区域内的图片。
CSS3 硬件加速： 对于需要动画效果的瀑布流，可以使用 CSS3 硬件加速，例如 transform: translate3d(0, 0, 0)，提高动画性能。

// 节流函数
function throttle(func, delay) {
  let timeoutId;
  let lastExecTime = 0;

  return function(...args) {
    const context = this;
    const currentTime = new Date().getTime();

    if (!timeoutId) {
      if (currentTime - lastExecTime >= delay) {
        func.apply(context, args);
        lastExecTime = currentTime;
      } else {
        timeoutId = setTimeout(function() {
          func.apply(context, args);
          lastExecTime = new Date().getTime();
          timeoutId = null;
        }, delay - (currentTime - lastExecTime));
      }
    }
  };
}

window.addEventListener('resize', throttle(function() {
  calculateLayout();
  positionImages();
}, 200)); // 200ms 节流

登录后复制

总而言之，瀑布流的实现方式有很多种，选择哪种方式取决于具体的应用场景和需求。CSS3 实现简单快速，但控制力较弱；JavaScript 实现灵活可控，但需要更多的代码和优化。