卡片 · card-waterfall 瀑布流
卡片家族
索引
base
cpanel
crumb
full
page
border
radius
api
artic
namecode
imgs
tips
total
default
box
checkbox
form
form-item
form-inpselect
table
pager
multipled
menubar
mode
menus
tabmenu
code
json
template
tab
slide
paginate
tree
toggle
marquee
timeaxis
waterfall
popup
nav
chatbox
drag
choose
progress
roll
瀑布流卡
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 ·
返回首页