瀑布流 waterfallFlow
方法描述
将图片或商品列表错位布局，错位高度可设置。
应用场景
主要应用于图片或商品列表类模块，如商品推荐、图片show等模块。
方法参数
| 名称 | 值 | 类型 | 描述 |
|---|---|---|---|
| 调用语句 | <div class="j-module" module-function="waterfallFlow" module-param="{参数一:值,参数二:值,...>模板代码</div> | 方法调用 | 支持传入参数 |
| 参数 | |||
| 节点 | node | string | 需要使用瀑布流的节点，如：{node:'li'} |
| 节点父级区域 | area | string | 需要重设高度的父级节点，如：{area:'.goodsArea'} |
| 顶部间距 | topSpac | number | 顶部错位的距离，如：{topSpac:10} |
可使用模块
- 商品推荐
- 图片show
- 更多效果等您发挥
商品推荐DEMO
瀑布流
-
今日故事韩版帽子秋冬时尚羊毛保暖贝雷帽女士鸭舌帽393013 米白色 进店领取10元通杀券、买套餐超划算详情请打开此链接//url.cn/WkRqKe¥139.00
-
贵伦美 新款兔毛毛线帽子 女 秋冬天 韩版潮冬季护耳针织鸭舌帽子MM0084 气质驼 M(56-58)CM 双十大促 满150减30 满300减100¥88.00
-
Thantrue真享帽子男士韩版百搭纯棉针织帽秋冬季保暖套头帽毛线帽头巾堆堆帽Z001 黑色 双11快抢京光 优惠券大放送！内页可领取 双十一当天使用¥49.00
-
Siggi 帽子男女秋冬天韩版潮针织帽毛线帽保暖套头帽头巾帽堆堆帽街舞嘻哈帽 黑色嘻哈图案款 成人均码 双十季 嘻哈潮人明星范儿街舞套头帽¥49.00
<div class="j-module" module-function="autoWidth,waterfallFlow" module-param="{node:'li', topSpac:15}" >
<div class="goodsArea">
<ul>
#foreach($!goods in $!goodsRecList)
<li>
<div class="jItem">
<div class="jGoodsInfo">
<div class="jDesc">
<a href="$!jshopProduct.getBuyUrl($!goods.goodsId)" target="_blank">$!goods.wname</a>
<span class="jSlogan">$!goods.advertWord</span>
</div>
<div class="jPrice"><span class="jRmb">¥</span>$!jshopPrice.getJdPrice($!goods.goodsId)</div>
</div>
<div class="jPic">
<a href="$!jshopProduct.getBuyUrl($!goods.goodsId)" target="_blank"><img src="$!jshopCommon.getImage($!goods.imageurl,2)" width="125" height="125" /></a>
</div>
</div>
</li>
#end
</ul>
</div>
</div>
.jGoodsRecommend .goodsArea{background:#FFF; border:solid 1px #e5e5e5; padding:10px 34px; height:100%;}
.jGoodsRecommend ul{position:relative;}
.jGoodsRecommend li{position:absolute; width:230px; background:#FFF;}
.jGoodsRecommend .jItem{padding:20px 10px; border:solid 1px #e5e5e5; margin-left:-1px; margin-top:-1px;}
.jGoodsRecommend .jGoodsInfo, .jGoodsRecommend .jPic{display:inline-block; vertical-align:middle; *display:inline; zoom:1;}
.jGoodsRecommend .jGoodsInfo{width:75px;}
.jGoodsRecommend .jPic{margin-left:5px;}
.jGoodsRecommend .jPic img{width:125px; height:125px;}
.jGoodsRecommend .jDesc{height:32px; line-height:1.3; overflow:hidden;}
.jGoodsRecommend .jDesc a{color:#996633;}
.jGoodsRecommend .jDesc a:hover{text-decoration:underline;}
.jGoodsRecommend .jPrice{color:#bc0e08; margin-top:35px; font-weight:bold;}