瀑布流:服务端取数渲染 + 客户端算宽度

卡片数据在服务端获取并渲染成 HTML;"按屏幕宽度算几列"在客户端完成。拖动浏览器窗口改变宽度,观察列数变化。

客户端布局组件('use client')—— 当前列数:1

卡片 1

高度 120px · 服务端渲染

卡片 2

高度 157px · 服务端渲染

卡片 3

高度 194px · 服务端渲染

卡片 4

高度 231px · 服务端渲染

卡片 5

高度 268px · 服务端渲染

卡片 6

高度 145px · 服务端渲染

卡片 7

高度 182px · 服务端渲染

卡片 8

高度 219px · 服务端渲染

卡片 9

高度 256px · 服务端渲染

卡片 10

高度 133px · 服务端渲染

卡片 11

高度 170px · 服务端渲染

卡片 12

高度 207px · 服务端渲染

卡片 13

高度 244px · 服务端渲染

卡片 14

高度 121px · 服务端渲染

卡片 15

高度 158px · 服务端渲染

卡片 16

高度 195px · 服务端渲染

卡片 17

高度 232px · 服务端渲染

卡片 18

高度 269px · 服务端渲染

卡片 19

高度 146px · 服务端渲染

卡片 20

高度 183px · 服务端渲染

观察:右键"查看网页源码",能看到所有卡片内容(标题、高度)都已渲染进 HTML;而"计算列数" 的逻辑只在浏览器里执行(拖动窗口才会变)。