Web前端之指定元素优先列布局的实现原理、使用数据驱动实现Grid布局、Grid首列锚定算法

效果图

部分源码

JavaScript代码

/** * 将指定的列放在第一列（将指定元素放在第一列，其他元素依次排列） * @param {*} arr * @param {*} ids * @param {*} cols * @returns */functionplaceFirstColumn(arr=[],ids=[],cols=5){constset=newSet(ids);constfirst=arr.filter((i)=>set.has(i.value));constrest=arr.filter((i)=>!set.has(i.value));constres=Array(arr.length);letj=0;first.forEach((item,i)=>(res[i*cols]=item));for(leti=0;i<res.length;i++){if(!res[i])res[i]=rest[j++];}returnres;}

完整源码
pinFirstColumn

一、学习目标

通过本案例，学习并掌握以下知识：

• 如何用数据驱动 UI
• 如何通过算法控制 Grid（栅格）布局的视觉顺序
• Set + filter 的高效筛选模型
• “首列锚定”布局算法思想
• 模板渲染与数据渲染解耦
• 面向扩展的字段配置设计

二、整体设计思想（一句话）

通过重排数组索引，精确控制 CSS Grid（栅格布局） 的视觉排布顺序，实现指定字段始终占据每一行的第一列。

三、核心数据结构设计（ColumnList）

constColumnList=[{value:"id",label:"ID",unit:"无"},{value:"energy",label:"能量",unit:"kcal"},...];

这是一个高度工程化的字段描述表，具备：

这是典型的「元数据驱动界面」设计
UI 不写死，完全由配置生成。

四、关键参数说明

constcolumnNum=5;constRC=["energy","protein","fat","carbohydrate","sodium"];

五、初始化流程（init）

functioninit(){constlist=placeFirstColumn([...ColumnList],RC,columnNum);el+=renderList("origin",ColumnList,columnNum);el+=renderList("result",list,columnNum);}

做了三件事：

• 原始列表渲染
• 重排后的列表渲染
• 对比效果展示

这是非常好的教学示例：对照实验法。

六、渲染模型（renderList / renderItem）

renderList()

grid-template-columns:repeat(${columnNum},1fr);

使用 CSS Grid 自动布局。

重点：Grid 的布局顺序 = DOM 顺序

这正是后面算法生效的根本原因。

renderItem

functionrenderItem({label,unit})

模板与数据解耦：

• 不关心字段是什么
• 只负责展示结构

典型的“无脑模板 + 智能数据”架构

七、核心算法：首列锚定算法（placeFirstColumn）

这是整份代码的灵魂。

functionplaceFirstColumn(arr,ids,cols)

第一步：快速锁定目标元素

constset=newSet(ids);constfirst=arr.filter(i=>set.has(i.value));constrest=arr.filter(i=>!set.has(i.value));

• Set 实现 O(1) 查找
• 将数组分为：
  • 首列元素
  • 其余元素

第二步：创建结果数组（关键）

constres=Array(arr.length);

创建一个“带洞”的数组，准备精确填充。

第三步：按“行首索引”放入目标元素

first.forEach((item,i)=>(res[i*cols]=item));

如果 cols = 5，索引会变成：

0,5,10,15,20...

这些位置正好是：

每一行的第一个格子

第四步：填充剩余空位

for(leti=0;i<res.length;i++){if(!res[i])res[i]=rest[j++];}

把其他元素顺序补齐。

八、为什么这个算法能控制 Grid 布局？

因为：

Grid 视觉顺序 = DOM 顺序 = 数组顺序

只要数组索引对，Grid 自动排好。
无需：

• CSS Hack
• 绝对定位
• order 排序
• 复杂样式

纯数据控制布局。

九、算法示意图（cols = 5）

⭐ = RC 中的字段

十、时间复杂度分析

没有排序，没有嵌套循环，非常优雅。

十一、工程层面的优秀点

这段代码体现了非常高阶的工程思维：

• 数据驱动 UI
• 算法驱动布局
• 配置驱动结构
• 模板与数据彻底解耦
• 可扩展字段系统
• 高性能 O(n)

十二、可扩展方向（知识延伸）

思考：

1. 如果要“固定第二列”怎么做？
2. 如果要“固定对角线”呢？
3. 如果列数变化，算法是否需要改？
4. 如果 RC 多于行数会怎样？
5. 是否可以做成通用库？

十三、总结（必须记住的核心思想）

不要用 CSS 控制布局顺序，要用数据顺序控制布局。

这是前端从“写样式”进阶到“写系统”的关键认知跃迁。

本案例适合的知识点

• Set 数据结构
• Grid 布局原理
• 数组索引控制视觉
• 元数据驱动 UI
• 算法化思维在前端的应用

高级工程能力