方法描述
将图片或商品列表错位布局，错位高度可设置。

应用场景
主要应用于图片或商品列表类模块，如商品推荐、图片show等模块。

方法参数
名称 值 类型 描述
调用语句 <div class="j-module" module-function="waterfallFlow" module-param="{参数一:值,参数二:值,...>模板代码</div> 方法调用 支持传入参数
参数
节点 node string 需要使用瀑布流的节点，如：{node:’li’}
节点父级区域 area string 需要重设高度的父级节点，如：{area:’.goodsArea’}
顶部间距 topSpac number 顶部错位的距离，如：{topSpac:10}

<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">&yen;</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;}