2026/9/24小于 1 分钟
算法 UI 方案对比
同样 8 个算法，用 5 种完全不同的排布画出来了。手机上是单列/双列自动折的，你在手机上看正好能看到真实效果。
点不进是正常的，这些只是外壳，选定风格之后再往里接真正的可视化页面。
方案 A极简网格卡片最通用，算法多了也不乱，手机端两列自动折
⚡
快速排序
Quick Sort
分治 + 双指针
🔀
归并排序
Merge Sort
拆两半再合并
⛰️
堆排序
Heap Sort
建堆后逐个弹出
🌊
Floyd 最短路
Floyd
三重循环逐点松弛
🧭
Dijkstra
Dijkstra
贪心 + 优先队列
📡
广度优先搜索
BFS
一圈一圈往外扩
🌲
二叉树遍历
Tree Traverse
前中后三种序
🧠
LRU 缓存
LRU Cache
哈希 + 双向链表
方案 B按类别分色带适合按"排序 / 图 / 树"复习，一眼看到某类有几个
排序3 个
快速排序分治 + 双指针
归并排序拆两半再合并
堆排序建堆后逐个弹出
图3 个
Floyd 最短路三重循环逐点松弛
Dijkstra贪心 + 优先队列
广度优先搜索一圈一圈往外扩
树1 个
二叉树遍历前中后三种序
结构1 个
LRU 缓存哈希 + 双向链表
方案 C终端命令行风最有"程序员味"，配代码块截图很搭，但不好看第二眼
➜~/algo./quick-sort--demo快速排序 · 分治 + 双指针
➜~/algo./merge-sort--demo归并排序 · 拆两半再合并
➜~/algo./heap-sort--demo堆排序 · 建堆后逐个弹出
➜~/algo./floyd--demoFloyd 最短路 · 三重循环逐点松弛
➜~/algo./dijkstra--demoDijkstra · 贪心 + 优先队列
➜~/algo./bfs--demo广度优先搜索 · 一圈一圈往外扩
➜~/algo./tree-traverse--demo二叉树遍历 · 前中后三种序
➜~/algo./lru-cache--demoLRU 缓存 · 哈希 + 双向链表
方案 D彩色渐变大卡最抢眼，适合放首页当门面；算法一多会显得吵
方案 E紧凑索引表信息密度最高，几百个算法也不 scrolling；适合当速查
| 算法 | 类别 | 核心思路 | 难度 |
|---|---|---|---|
| 快速排序 | 排序 | 分治 + 双指针 | ●●● |
| 归并排序 | 排序 | 拆两半再合并 | ●●○ |
| 堆排序 | 排序 | 建堆后逐个弹出 | ●●● |
| Floyd 最短路 | 图 | 三重循环逐点松弛 | ●●○ |
| Dijkstra | 图 | 贪心 + 优先队列 | ●●● |
| 广度优先搜索 | 图 | 一圈一圈往外扩 | ●○○ |
| 二叉树遍历 | 树 | 前中后三种序 | ●○○ |
| LRU 缓存 | 结构 | 哈希 + 双向链表 | ●●● |
我的建议
- 想长期放很多算法（几十上百个）→ 选 A 或 E，扩展性最好，加内容不变形
- 想看着有劲、愿意常回来 → 选 D，但建议只在首页用，内页还是 A
- 想突出"我在学"而不是"我在展示" → 选 B，按 408 的章节分组很顺
- C 我不推荐当主风格，终端风三天就腻了，但放在某个算法详情页里当点缀很合适