HTML / CSS大前端算法
前端瀑布流布局：基础实现与高性能优化
前端瀑布流布局的核心原理，涵盖原生 JavaScript 基础实现、响应式适配及无限滚动加载方案。针对图片加载延迟、DOM 节点过多等高频问题提供解决方案，并补充 Vue3 和 React 框架实战技巧。最后总结生产环境下的性能优化策略，包括图片懒加载、防抖节流、虚拟滚动及移动端适配，帮助开发者构建高性能的流式布局系统。
前端瀑布流布局的核心原理，涵盖原生 JavaScript 基础实现、响应式适配及无限滚动加载方案。针对图片加载延迟、DOM 节点过多等高频问题提供解决方案，并补充 Vue3 和 React 框架实战技巧。最后总结生产环境下的性能优化策略，包括图片懒加载、防抖节流、虚拟滚动及移动端适配，帮助开发者构建高性能的流式布局系统。
瀑布流（Waterfall Layout）是前端开发中极具代表性的流式布局方案，以非固定高度、多列自适应、内容错落有致的特点成为图片展示、商品列表、内容资讯等场景的主流选择（如 Pinterest、花瓣网、小红书首页等）。其核心逻辑是让元素按自身高度自适应填充到页面空白区域，打破传统网格布局的固定行列限制，兼顾视觉美感与空间利用率。本文将从瀑布流的核心原理出发，依次讲解原生 JS 基础实现、响应式适配、高频问题解决方案及生产环境高性能优化方案，同时补充主流框架（Vue/React）的实战技巧，让你从入门到精通瀑布流开发。
瀑布流的本质是**'多列布局 + 动态高度计算 + 元素精准定位'**，核心步骤可概括为 3 点：
整个过程类似'往多个不同高度的杯子里倒水，每次都倒到当前最浅的杯子中'，最终实现所有列高度尽可能接近，页面无大面积空白。
注意：若需展示的元素高度高度统一，或要求严格的行列对齐（如表格、商品网格），则不建议使用瀑布流。
在动手实现前，先掌握 2 个核心基础知识点，避免开发中踩坑：
瀑布流的元素定位主要依赖绝对定位（position: absolute），父容器需设置相对定位（position: relative）作为定位参考；同时需重置元素默认盒模型，避免边距、内边距影响宽度计算：
/* 瀑布流父容器：相对定位 + 清除默认边距 */
.waterfall {
position: relative;
width: 100%;
margin: 0 auto;
box-sizing: border-box;
}
/* 瀑布流子元素：绝对定位 + 固定宽度 + 盒模型重置 */
.waterfall-item {
position: absolute;
width: calc(100% / 4 - 20px); /* 4 列布局，间距 20px */
box-sizing: border-box;
margin-bottom: 20px; /* 元素上下间距 */
}
本章节实现固定列数、静态数据、一次性渲染的基础瀑布流，是所有进阶方案的核心基础，代码无框架依赖、可直接运行，适合理解底层逻辑。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>原生 JS 基础瀑布流</title>
<style>
* { margin: 0; padding: 0; list-style: none; }
.waterfall { position: relative; width: 1200px; margin: 0 auto; }
.waterfall-item { position: absolute; width: calc(100% / 4 - 15px); border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.waterfall-item img { width: 100%; : block; }
{ : ; : ; : ; }
以上代码是瀑布流的最核心实现，关键步骤已标注注释，核心亮点总结：
基础版为固定列数，在移动端、平板等设备上会出现布局错乱，响应式适配是瀑布流的必备优化，核心思路是根据窗口宽度动态调整列数，结合「窗口大小监听 + 重新渲染」实现。
在基础版代码基础上，新增/修改以下代码（关键优化部分标注注释）：
// 1. 修改配置：将固定列数改为根据宽度匹配的列数规则
const config = {
gap: 15,
container: document.getElementById('waterfall'),
// 响应式列数规则：[最小宽度，对应列数]，按从大到小排序
columnRules: [
[1200, 4], // 宽度≥1200px：4 列
[992, 3], // 992px≤宽度<1200px：3 列
[768, 2], // 768px≤宽度<992px：2 列
[0, 1] // 宽度<768px：1 列（移动端）
]
};
// 2. 新增：根据窗口宽度获取当前应显示的列数
function getCurrentColumn(){
const windowWidth = document.documentElement.clientWidth;
const { columnRules } = config;
for(const [minWidth, column] of columnRules){
if(windowWidth >= minWidth){ return column; }
}
return 1; // 兜底：默认 1 列
}
// 3. 改造初始化函数：支持动态列数，抽离重置逻辑
function initWaterfall(data){
if(!data.length || !config.container) return;
// 重置容器：清空原有内容、清除原有高度、重置列高度数组
config.container.innerHTML = '';
config... = ;
containerWidth = config..;
column = ();
itemWidth = (containerWidth - (column - ) * config.) / column;
columnHeights = (column).();
data.({
itemEl = .();
itemEl. = ;
itemEl. = ;
config..(itemEl);
itemEl.. = ;
minIndex = columnHeights.(.(...columnHeights));
left = minIndex * (itemWidth + config.);
top = columnHeights[minIndex];
itemEl.. = ;
itemEl.. = ;
columnHeights[minIndex] = top + itemEl. + config.;
});
config... = ;
}
resizeTimer = ;
.(, {
(resizeTimer);
resizeTimer = ({
(waterfallData);
}, );
});
(waterfallData);
瀑布流常用于海量内容展示，一次性渲染所有数据会导致首屏加载慢、DOM 节点过多、页面卡顿，无限滚动加载是解决该问题的核心方案，核心思路是：首屏只渲染部分数据，当用户滚动到页面底部时，异步加载下一页数据并追加到瀑布流中。
结合响应式瀑布流，新增无限滚动逻辑（关键部分标注注释）：
// 1. 新增全局状态：管理分页、加载状态
const state = {
page: 1, // 当前页码
pageSize: 10, // 每页加载数量
isLoading: false, // 是否正在加载，避免重复请求
hasMore: true // 是否还有更多数据
};
// 2. 模拟异步接口请求：获取瀑布流数据
async function fetchWaterfallData(page, pageSize){
await new Promise(resolve => setTimeout(resolve, 500));
const total = 30;
const start = (page - 1) * pageSize;
const end = start + pageSize;
if(start >= total) return [];
return Array.from({ length: Math.min(pageSize, total - start) }, (_, index)=>({
id: start + index + 1,
imgUrl: `https://picsum.photos/300/${200 + Math.floor(Math.random() * 300)}`,
title: `瀑布流卡片${start + index + 1}`
}));
}
(){
container = config.;
(!data. || !container) ;
containerWidth = container.;
column = ();
itemWidth = (containerWidth - (column - ) * config.) / column;
columnHeights = isAppend ? .(.())|| (column).() : (column).();
(!isAppend){
container. = ;
container.. = ;
}
data.({
itemEl = .();
itemEl. = ;
itemEl. = ;
container.(itemEl);
itemEl.. = ;
minIndex = columnHeights.(.(...columnHeights));
left = minIndex * (itemWidth + config.);
top = columnHeights[minIndex];
itemEl.. = ;
itemEl.. = ;
columnHeights[minIndex] = top + itemEl. + config.;
});
container.. = ;
.(, .(columnHeights));
}
(){
state. = ;
data = (state., state.);
state. = data. === state.;
(data, );
state. = ;
}
(){
(state. || !state.) ;
state. = ;
state.++;
data = (state., state.);
state. = data. === state.;
(data, );
state. = ;
}
(){
scrollTop = .. || ..;
clientHeight = ..;
scrollHeight = ..;
(scrollTop + clientHeight >= scrollHeight - ){
();
}
}
.(, handleScroll);
resizeTimer = ;
.(, {
(resizeTimer);
resizeTimer = ({
state. = ;
state. = ;
();
}, );
});
();
瀑布流开发中，图片加载、元素定位、性能问题是高频踩坑点，以下是实际开发中最常见的 4 个问题及可直接落地的解决方案：
问题原因：图片是异步加载的，若图片未加载完成，itemEl.offsetHeight 获取的是元素的初始高度（不含图片），导致列高度计算错误，后续元素定位偏移。
解决方案：图片加载完成后再渲染/更新高度
data.forEach(item =>{
const itemEl = document.createElement('div');
itemEl.className = 'waterfall-item';
itemEl.innerHTML = `<img src="${item.imgUrl}" alt="${item.title}" style="display: none;"><p>${item.title}</p>`;
config.container.appendChild(itemEl);
itemEl.style.width = `${itemWidth}px`;
const img = itemEl.querySelector('img');
img.onload = function(){
img.style.display = 'block';
const minIndex = columnHeights.indexOf(Math.min(...columnHeights));
const left = minIndex * (itemWidth + config.gap);
const top = columnHeights[minIndex];
itemEl.style.left = `${left}px`;
itemEl.style.top = `${top}px`;
columnHeights[minIndex] = top + itemEl.offsetHeight + config.gap;
config.container.style.height = `${.max(...columnHeights) - config.gap}px`;
.(, .(columnHeights));
};
img. = (){
img. = ;
img.();
};
});
核心思路：先隐藏图片，待图片加载完成后再显示并重新计算元素高度，确保高度获取准确。
问题原因：随着用户不断滚动，页面中的 DOM 节点持续增加，浏览器重绘/重排压力增大，导致页面卡顿、响应变慢。
解决方案：虚拟滚动（只渲染可视区域内的元素）
对于海量内容的瀑布流，虚拟滚动是最优解，核心思路是：
实战推荐：无需自己实现复杂的虚拟滚动逻辑，直接使用成熟的第三方库：
问题原因：瀑布流元素使用绝对定位，脱离了正常文档流，父容器后续的元素会忽略瀑布流的高度，导致布局重叠。
解决方案：2 种兜底方案，按需选择
问题原因：在移动端，瀑布流弹窗/浮层中的滚动会穿透到背景页面，导致背景页面同时滚动，影响用户体验。
解决方案：移动端滚动穿透禁止
function stopBodyScroll(){
document.body.style.overflow = 'hidden';
document.body.style.touchAction = 'none';
}
function resumeBodyScroll(){
document.body.style.overflow = 'auto';
document.body.style.touchAction = 'auto';
}
核心思路：通过设置 body 的 overflow: hidden 和 touchAction: none，禁止移动端背景页面的滚动。
实际开发中，更多是在 Vue/React 等框架中使用瀑布流，纯原生实现适合理解底层逻辑，框架中推荐使用成熟的第三方库，避免重复造轮子，以下是 Vue3 和 React 的快速实战方案，开箱即用。
步骤 1：安装依赖
npm install vue3-waterfall-plugin --save # 或 yarn add vue3-waterfall-plugin
步骤 2：全局注册组件
// main.js
import { createApp } from 'vue';
import App from './App.vue';
import Vue3Waterfall from 'vue3-waterfall-plugin';
import 'vue3-waterfall-plugin/dist/style.css';
const app = createApp(App);
app.use(Vue3Waterfall);
app.mount('#app');
步骤 3：组件中使用（支持响应式、无限加载、图片懒加载）
<template>
<div class="waterfall-container">
<vue3-waterfall :list="waterfallList" :gap="15" :column="column" @scrollReachBottom="loadNextPage">
<template #default="{ item }">
<div class="waterfall-item">
<img v-lazy="item.imgUrl" alt="item.title"/>
<p>{{ item.title }}</p>
</div>
</template>
<template #loading>
<div class="loading">加载中...</div>
</template>
<template #noMore>
<div class="no-more">没有更多内容了</div>
</template>
</vue3-waterfall>
</div>
</template>
<script setup>
import { ref, onMounted, onResize } from 'vue';
import { vLazy } from 'vue3-lazy';
const column = ref(4);
const waterfallList = ref([]);
const page = ref(1);
const pageSize = ref(10);
const isLoading = ref(false);
const hasMore = ref(true);
const setColumn = () => {
const width = document.documentElement.clientWidth;
if(width >= 1200) column.value = 4;
else if(width >= 992) column.value = 3;
else if(width >= 768) column.value = 2;
else column.value = 1;
};
const fetchData = async (page, pageSize) => {
await new Promise(resolve => setTimeout(resolve, 500));
const total = 30;
const start = (page - 1) * pageSize;
if(start >= total) return [];
return Array.from({ length: Math.min(pageSize, total - start) }, (_, i) => ({
id: start + i + 1,
imgUrl: `https://picsum.photos/300/${200 + Math.floor(Math.random() * 300)}`,
title: `Vue3 瀑布流${start + i + 1}`
}));
};
const loadFirstScreen = async () => {
isLoading.value = true;
const data = await fetchData(page.value, pageSize.value);
waterfallList.value = data;
hasMore.value = data.length === pageSize.value;
isLoading.value = false;
};
const loadNextPage = async () => {
if(isLoading.value || !hasMore.value) return;
isLoading.value = true;
page.value++;
const data = await fetchData(page.value, pageSize.value);
waterfallList.value.push(...data);
hasMore.value = data.length === pageSize.value;
isLoading.value = false;
};
onMounted(() => {
setColumn();
loadFirstScreen();
});
onResize(() => {
setColumn();
});
</script>
<style scoped>
.waterfall-container { width: 1200px; margin: 0 auto; }
.waterfall-item { border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.waterfall-item img { width: 100%; display: block; }
.waterfall-item p { padding: 10px; font-size: 14px; color: #333; }
.loading, .no-more { text-align: center; padding: 20px; font-size: 14px; color: #999; }
</style>
为了让瀑布流在生产环境中流畅运行、适配海量数据、兼容所有设备，结合前文内容，总结 6 个生产环境必做的高性能优化点，按优先级排序：
图片是瀑布流的核心元素，也是性能瓶颈的主要来源，优化点：
<img srcset="image-300w.webp 300w, image-600w.webp 600w" sizes="(max-width:768px) 300px, 600px" src="image-600w.webp" alt="瀑布流图片">
.img-container { aspect-ratio: 3/4; overflow: hidden; }
.img-container img { width: 100%; height: 100%; object-fit: cover; }
对窗口大小变化、滚动事件添加防抖/节流，避免频繁触发渲染和接口请求，推荐配置：
对于海量内容（超过 100 条）的瀑布流，虚拟滚动是解决 DOM 节点过多的唯一最优解，直接使用成熟的第三方库，避免自己实现复杂逻辑。
瀑布流布局是前端开发中兼具实用性与视觉美感的经典方案，其核心是围绕'动态列高度计算 + 元素精准定位'展开，从基础实现到生产环境，核心学习路径可概括为：
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
使用加密算法（如AES、TripleDES、Rabbit或RC4）加密和解密文本明文。 在线工具，加密/解密文本在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online
将 Markdown（GFM）转为 HTML 片段，浏览器内 marked 解析；与 HTML转Markdown 互为补充。 在线工具，Markdown转HTML在线工具，online
将 HTML 片段转为 GitHub Flavored Markdown，支持标题、列表、链接、代码块与表格等；浏览器内处理，可链接预填。 在线工具，HTML转Markdown在线工具，online
通过删除不必要的空白来缩小和压缩JSON。 在线工具，JSON 压缩在线工具，online