方法描述
根据布局的宽度判断能放下的一行数量，并将平均宽度转化为百分比形式。转化好的class类将自动写入节点。

应用场景
主要应用于不同的宽度布局，如190、390、590、790、990等布局，同一套模板显示的列表个数会根据布局宽度自动计算，并撑满布局。这个方法和autoWidth类似，各有各的使用效果。

方法参数
名称 值 类型 描述
调用语句 <div class="j-module" module-function="autoLayout" module-param="{参数一:值,参数二:值,...>模板代码</div> 方法调用 支持传入参数
参数
节点 node string 需要计算宽度的节点，如：{node:’li’}
间距类型 spacingType string 节点的间距类型，其值为：margin和padding，如{spacingType: ‘margin’}
间距宽度 size number 间距的宽度，其值为0.5和1，其中0.5代表左右间距为0.5%，1代表左右间距为1%。如{size: 1}

<div class="j-module" module-function="autoLayout" module-param="{node:'li', spacingType:'margin', size:0.5}" >
    <ul>
        #foreach($!goods in $!goodsRecList) 
        <li>
            <div class="jItem">
                <div class="jPic">
                    <a href="$!jshopProduct.getBuyUrl($!goods.goodsId)" target="_blank">
                        <img src="$!jshopCommon.getImage($!goods.imageurl,2)" alt="$!goods.wname" height="160" width="160" />
                    </a>
                </div>
                <div class="jGoodsInfo"> 
                    <div class="jDesc" title="$!goods.wname $!goods.advertWord">
                        <a href="$!jshopProduct.getBuyUrl($!goods.goodsId)" target="_blank">$!goods.wname</a>
                        <span class="jSlogan">$!goods.advertWord</span>
                    </div>                        
                   <div class="jPrice">
                        <div class="jdPrice">
                            <span class="jRmb">&yen;</span>
                            $!jshopPrice.getJdPrice($!goods.goodsId)
                        </div>
                    </div>
                    <div class="jBtnArea">
                        <a target="_blank" href="$!jshopCommon.addCart($!goods.goodsId)">放入购物车</a>
                    </div>
                </div>
            </div>
            #if($!goods.promTag && $!goods.promTag!="")
            <div class="jPromotionLabel">
                <div class="jPromotionTextArea">
                    <span class="jPromotionNum">$!goods.promTag</span>
                </div>
            </div>
            #end
        </li>
        #end
    </ul>
</div>

.userjGoodsRecommend .mt{}
.userjGoodsRecommend .mc{background:#ffe7f4; overflow:hidden;}
.userjGoodsRecommend .mb{display:none;}
.userjGoodsRecommend .mc ul{width:100%;}
.userjGoodsRecommend li{float:left; width:185px; padding:5px 0; margin:0 5px; overflow:hidden; display:inline; position:relative;}
.userjGoodsRecommend .jItem{height:auto; background:#fff; border:solid 1px #f0b7e3;}
.userjGoodsRecommend .jPic{position:relative; text-align:center; background:#fff; _height:100%;}
.userjGoodsRecommend .jPic img{vertical-align:top;}
.userjGoodsRecommend .jPic a{padding:5px 0; width:160px; height:160px; display:block; margin:0 auto;}
.userjGoodsRecommend .jGoodsInfo{overflow:hidden; position:relative; padding:5px; zoom:1;}
.userjGoodsRecommend .jDesc{height:32px; line-height:1.3; overflow:hidden;}
.userjGoodsRecommend .jDesc a{color:#8c8c8c; text-decoration:none;}
.userjGoodsRecommend .jDesc a:hover{text-decoration:underline;}
.userjGoodsRecommend .jDesc .jSlogan{color:#9a3082!important;}
.userjGoodsRecommend .jPrice{height:17px; overflow:hidden; padding:5px 0;}
.userjGoodsRecommend .jPrice span{float:left; display:inline;}
.userjGoodsRecommend .jPrice .jsNumNo{text-decoration:none;}
.userjGoodsRecommend .jdPrice{color:#9a3082; font-weight:bold;}
.userjGoodsRecommend .jdPrice .jRmb{font-size:14px;}
.userjGoodsRecommend .jdPrice .jText{font-size:14px;}
.userjGoodsRecommend .jdPrice .jdNum{font-size:18px;}
.userjGoodsRecommend .jdPrice .jdNumNo{font-size:12px;}
.userjGoodsRecommend .jSalePrice{color:#9ed1f9; text-decoration:line-through; overflow:hidden; clear:both;}
.userjGoodsRecommend .jSalePrice .jText{text-decoration:line-through;}
.userjGoodsRecommend .jSalePrice .jRmb{text-decoration:line-through;}
.userjGoodsRecommend .jSalePrice .jsNum{text-decoration:line-through;}
.userjGoodsRecommend .jBtnArea{overflow:hidden; position:absolute; right:5px; bottom:10px;}
.userjGoodsRecommend .jBtnArea a{display:block; background:url(//img14.360buyimg.com/cms/g6/M00/03/1B/rBEGDFC14QEIAAAAAAAGoFUJLbYAAAwXAPVaHgAAAa4047.gif) no-repeat;  _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='//img14.360buyimg.com/cms/g6/M00/03/1B/rBEGDFC14QEIAAAAAAAGoFUJLbYAAAwXAPVaHgAAAa4047.gif'); _background-image:none; width:75px; height:22px; text-indent:-9999px;}
.userjGoodsRecommend .jPromotionLabel{width:40px; height:66px; background:url(//img10.360buyimg.com/cms/g8/M02/0F/11/rBEHZ1C0Ma8IAAAAAAAIpkn1m8MAADCTQP_7yMAAAi-795.png) no-repeat;  _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='//img10.360buyimg.com/cms/g8/M02/0F/11/rBEHZ1C0Ma8IAAAAAAAIpkn1m8MAADCTQP_7yMAAAi-795.png'); _background-image:none;  position:absolute; top:5px; right:10px;}
.userjGoodsRecommend .jPromotionTextArea{overflow:hidden; text-align:center; padding-top:22px; line-height:1.2; color:#fff;}
.userjGoodsRecommend .jPromotionText1{display:block;}
.userjGoodsRecommend .jPromotionNum{}
.userjGoodsRecommend .jPromotionText2{}