原生 JavaScript 实现仿百度图片瀑布流布局与滚动加载

桃夭

发布时间：2026-10-13| 5人浏览过

原创

本文详解如何使用原生 JavaScript 实现仿百度图片的瀑布流布局。核心逻辑包括计算容器宽度以确定列数、追踪各列高度以实现错位排列，以及利用滚动事件触发数据加载，适用于需要展示大量不规则尺寸图片或卡片的 Web 场景。

结果或目标

最终实现一个包含多个图片的容器，图片按照最小列高原则进行错落排列（即瀑布流效果）。当用户滚动页面至接近底部时，自动从模拟数据源获取新一批图片并追加到页面，同时保持布局的美观与对齐，提升浏览体验。

HTML 结构基础：需要一个固定 ID 的主容器 #main，内部放置若干初始图片项，每个图片项需包裹在类名为 .pin 的 div 中，图片本身位于 .box div 内。
CSS 样式支持：父容器相对定位，子元素浮动或绝对定位（脚本会自动处理），设置合理的内外边距以预留空间。
模拟数据源：由于未连接后端服务器，本文将使用 JavaScript 对象数组 dataInt 来模拟异步加载的数据结构。

目的：为 JS 逻辑提供操作的 DOM 节点和视觉基础。

入口：编辑 HTML 文件。

动作：

目的：根据当前窗口宽度和图片宽度，计算行数，并将所有图片按“最短列优先”原则重新排列。

入口：调用 waterfall('main', 'pin')。

动作：

获取元素与宽度：通过 ID 获取父容器 oParent，通过类名获取所有图片列 aPin。获取第一个 .pin 的宽度 iPinW。
计算列数：num = Math.floor(document.documentElement.clientWidth / iPinW)，确定一行能放多少列。
重置父容器宽度：设置 oParent 宽度为 iPinW * num，并居中显示，确保列宽一致。
初始化高度数组：pinHArr 用于记录每一列当前的累积高度，长度为 num。
遍历排列图片：循环遍历所有 .pin 元素：
- 若索引 i < num，说明是第一行的元素，直接将高度填入 pinHArr[i]。
- 若 i ≥ num，说明是第二行及以后的元素：
  1. 找出 pinHArr 中的最小值 minH 及其索引 minHIndex。
  2. 将当前图片 aPin[i] 设为 position: absolute。
  3. 设置位置：top 为 minH，left 为该列左侧元素的偏移量 aPin[minHIndex].offsetLeft。
  4. 更新该列高度： pinHArr[minHIndex] += aPin[i].offsetHeight。

目的：判断用户是否已滚动到足够近的位置，以提前加载下一页数据，避免白屏等待。

入口：绑定 window.onscroll 事件。

动作：

目的：在滚动触发后，将模拟数据转化为 DOM 节点并刷新布局。

入口：window.onload 中初始化。

动作：

定义模拟数据 var dataInt = { 'data': [...] }。
在 window.onscroll 回调中调用 checkscrollside()。
若为真，遍历数据数组：
<pre><code> for(var i=0; i<dataInt.data.length; i++) { // 创建 .pin -> .box -> img 的 DOM 树 // 设置 src 为 './images/' + dataInt.data[i].src // 依次 appendChild 到 #main } // 注入完成后，再次调用 waterfall('main', 'pin') 重新计算布局 </code></pre>

通过上述步骤，即可在没有后端支持的情况下，在本地浏览器中体验到完整的瀑布流无限滚动效果。

图片加载时机：如果图片尚未完全下载就执行布局计算，可能导致高度 offsetHeight 读取错误。在生产环境中，应监听 onload 或在图片资源就绪后再调用布局函数。
重复滚动触发：原代码在每次滚动都检查全量数据。若数据量大，建议添加锁标志（Lock），防止在 AJAX 请求期间重复触发加载。