1. 首页
  2. 卡片 Card
  3. card-waterfall 瀑布流

卡片 · card-waterfall 瀑布流

瀑布流卡 card-waterfall:body 相对定位容器,条目 waterfall-item 绝对定位 + 左浮动 + 溢出隐藏;坐标(left/top/top 逐列)由引擎以最短列算法计算并布局,实现不等高卡片流。
本页内容 结构 注意项

结构

<div class="card card-waterfall"> <div class="card-body"> <div class="waterfall-item">内容一(高度不一)</div> <div class="waterfall-item">内容二</div> </div> </div>
.card-body相对定位:决定瀑布流坐标原点
waterfall-item盒子:absolute + float:left + box-sizing + overflow hidden
引擎计算列宽/间距,逐项选最短列放 left/top 并追加

注意项

a: 条目高度在布局前必须可测量;用定高占位或图片预载,否则错列。 b: 刷新窗口需重新跑布局(引擎监听 resize 重排)。 c: 纯静态页内裸放绝对定位条目会重叠,详情页以代码块说明,运行时交给引擎。
KuoqiUI v2.00 · 离线静态文档 · 界面基于 KuoqiUI · 返回首页