小红书主页网格原理：双列瀑布流详解
Instagram 的主页网格很容易想明白：三列、格子大小一致、每行从左到右填满。小红书表面上看起来很像——一面缩略图墙——但它遵循的是一套完全不同的排版算法，而大多数为 Instagram 写的规划建议，在它面前都会悄悄失效。我们在一个预览引擎里实现了小红书的排版规则，所以这篇指南，就是我们当初希望早点存在的那份讲解：瀑布流究竟是怎么放置你的封面的，以及当你规划主页时，这意味着什么。
它是瀑布流，不是网格
小红书的主页是一个双列瀑布流（masonry）排版。三条规则在支配它：
- 恰好只有两列。
- 每张封面都按它的真实比例显示——没有统一裁切，所以一张高的 3:4 封面做成高卡片，一张方形封面做成矮卡片。
- 每张新卡片都会被追加到当前较短的那一列。
改变一切的，是第 3 条规则。在 Instagram 上，网格里的位置纯粹由发布顺序决定：第 5 条帖子就坐在一个固定的格子里（置顶帖另算）。在小红书上，一张卡片的位置取决于在它之前放置的所有内容的高度。同一组笔记、同样的顺序，可能仅仅因为封面比例不同，就产生一个左重或右重的页面。这里根本没有「行」——只有两条各自独立、争相向下奔跑的栈。
最新的在前，落在左上
排序是最新的在最上：你最近的一条笔记被最先放置，进入页面顶部，更旧的笔记往下填。后果是，每一条新帖都会把它下方的视觉配对重新洗牌。一张新卡片占据较短的那一列，这就改变了对下一张卡片而言哪一列更短，而这份位移会一路向下级联。昨天还并排坐着的两张封面，今天可能落到同一列里——不是因为有什么东西被移动了，而是因为上游的一张新卡片，改变了它后面所有内容所依据的列高。如果你曾经精心把两张封面排得挨在一起，却眼睁睁看着这份配对在多发一条帖之后就散掉了，这就是原因。
为什么你的两列看起来不齐
我们常常看到一个问题：「我的左列比右列长——我的主页是不是坏了？」没有。底部参差不齐，正是瀑布流正确渲染的样子。补进较短列的逻辑会让两列大致保持平衡，但它没法让它们相等：卡片高度各不相同，所以总有一列几乎比另一列收尾得更低，而这个差距最多可以达到大约一张卡片的高度。
当你帖子很少时，这个效果会被放大。只有四条笔记时，单单一张高封面就占了它那一列总高度里很大的比例，于是失衡格外刺眼；而有四十条笔记时，同样的差距在一个长页面的底部根本看不出来。新账号最担心这个，却最不需要担心——它会随着你不断发帖而淡去。
对规划的影响
一旦你把放置规则内化了，几个实用的推论就随之而来：
- 一张高封面会顶掉两张矮封面。一张 3:4 封面把它那一列拉长大约相当于两张 4:3 卡片封面的高度——高卡片是列宽的 1.33 倍，两张矮的各 0.75 倍——所以对面那一列会一直接收接下来的放置，直到追上为止。一张高卡片，实际上等于给邻列买下了一连串连续的卡片。
- 高矮交替能让两列保持平衡。如果你要混用比例，就把它们交错排。一串高封面后面跟着一串矮封面会造成一段段失衡的拉伸；而交替则让每一列都各吸收一张高、一张矮。
- 页脚也算进这道数学题里。每张卡片在封面下方都带着一个白色页脚——笔记的标题和作者行——而无论封面比例如何，这个页脚都给每张卡片加上一段大致固定的高度。这会以一种不那么直观的方式扭曲平衡：矮卡片的「页脚-封面」比例最差，所以一列若是收集了更多矮卡片，就会累积更多页脚，长得比仅看封面所暗示的更快。两张 4:3 卡片在列高上并不完全等于一张 3:4 封面——它们会略高一点，因为每张卡片都自带一个固定的页脚。
- 你无法把一对封面钉死在一起。因为每一条新帖都会把级联重跑一遍，「这两张封面必须挨在一起」只在你下一条笔记之前有保证。按列的节奏来规划——交替颜色、主体，或文字为主对照片为主的封面——并把精确的相邻关系当成是临时的。
看看你自己的瀑布流
这一切，看一眼远比在脑子里算要容易得多，这正是我们做这个预览器的原因。 FeedPeek 工具实现了上面描述的同一套补进较短列的放置规则——两列、真实的封面高度、固定页脚、最新的在前——所以它渲染出的页面，就是你主页将会显示的页面。把你打算发的封面拖进去，拖成另一种顺序，看着两列重新流动；测试一个「要是我先发那张高的会怎样？」的问题只要几秒钟，而不必做一次发了又后悔的实验。
而既然封面比例是整套排版所依据的输入，那就把这篇和 小红书封面尺寸指南搭配着看——主动而审慎地选择你的比例，是瀑布流所能提供的、最接近于「掌控它」的方式。
