瀑布流

为内容添加瀑布流布局

用法

为需要添加瀑布流布局的元素添加 data-waterfall 属性

代码

<div data-waterfall>
	<div>...</div>
	...
</div>

参数

可自定义函数参数

参数 类型 默认 说明
item string ">*" 瀑布流布局条目。
column int 4 分栏数,默认为 4。
margin int 16 分栏间距,单位为 px。
fill boolean false 是否填充脚部块。
footerCls string "placeholder" 填充的脚部块附加 CSS 样式名称。

代码

<div data-waterfall="{column:3, fill: true}">
	<div class="placeholder">
		...
	</div>
	...
</div>

示例

A

ARDELL/艾黛尔

ANNASUI/安娜苏

ETUDEHOUSE/爱丽小屋

abeeco

AFU/阿芙

Egyptian-Magic-Cream/埃及魔法膏

adidas/阿迪达斯

B

HERBORIST/佰草集

BURBERRY/巴宝莉/博柏利

BIOTHERM/碧欧泉

benefit/贝玲妃

Bavii/柏羽

PaulSmith/保罗史密夫

Bobbi Brown/芭比布朗

BVLGARI/宝格丽

PURE&MILD/泊美

baviphat/芭比菲特

Peter Thomas Roth/彼得罗夫

BeDOOK/比度克

BIODERMA/贝德玛

BKBarry-MBlistex/碧唇

C

Fenix/长生鸟

For Beloved One/宠爱之名

CHARMZONE/婵真

D

Dr.Jart+Dr.MJDior/迪奥

dodo

Dior/迪奥

Dove/多芬

DHC/蝶翠诗

Davidoff/大卫杜夫

E

N-Dorphin/恩朵娉

OPERA/娥佩兰

ELF

eos

F

芳草集

THEFACESHOP/菲诗小铺

Fanxishop/凡茜

FANCL/芳珂(芳凯尔)

VERSACE/范思哲