瀑布流:服务端取数渲染 + 客户端算宽度
卡片数据在服务端获取并渲染成 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;而"计算列数" 的逻辑只在浏览器里执行(拖动窗口才会变)。