方法描述
根据布局的宽度判断能放下的一行数量,并将多余的宽度平均分配给每一个列表项。支持css对象传入。

应用场景
主要应用于不同的宽度布局,如190、390、590、790、990等布局,同一套模板显示的列表个数会根据布局宽度自动计算,并撑满布局。

方法参数
名称 值 类型 描述
调用语句 <div class="j-module" module-function="autoWidth" module-param="{参数一:值,参数二:值,...>模板代码</div> 方法调用 支持传入参数
参数
节点 node string 需要计算宽度的节点,如:{node:’li’}
节点css对象 extra object 给需要计算宽度的节点增加一些css样式,这样可适应不同的效果需求。如{extra:{margin:’0 5px’, padding:’5px 0’}}

<div class="j-module" module-function="autoWidth" module-param="{}" >
    #if($moduleTitle.exists)
        <div class="jTitle">
            #if($moduleTitle.moreExists) 
                <span class="jTitleExtra"><a href="$!moduleTitle.moreLink">$!moduleTitle.more</a></span>
            #end
            #if($moduleTitle.titleExists) 
                <span class="jTitleName"><a href="$!moduleTitle.titleLink">$!moduleTitle.title</a></span>
            #end

        </div>
    #else
    <div class="jTitle">
        <span class="jTitleName">新品上架</span>
    </div>
    #end

    <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,6)" alt="$!goods.wname" class="err-product" width="238" height="238"  />
                    </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">
                            $!jshopPrice.getJdPrice($!goods.goodsId)
                        </div>
                        <div class="jSalePrice">
                            $!jshopPrice.getSalePrice($!goods.goodsId)
                        </div>
                    </div>
                    <div class="jBtnArea">
                        <a target="_blank" href="$!jshopCommon.addCart($!goods.goodsId)">放入购物车</a>
                    </div>
                </div>
            </div>
            #if( $!goods.promTag!="")
            <div class="jPromotionLabel">
                <div class="jPromotionTextArea">
                    <span class="jPromotionText1">直降</span><span class="jPromotionNum">$!goods.promTag</span><span class="jPromotionText2">元</span>
                </div>
            </div>
            #end
        </li>
        #end
    </ul>
</div>
.userjGoodsRecommend{background:#fff; overflow:hidden;}
.userjGoodsRecommend .mc{overflow:hidden;}
.userjGoodsRecommend .jTitle{background:#fff; border-bottom:solid 2px #e6e6e6; color:#666; padding:10px 0; margin-bottom:5px; overflow:hidden;}
.userjGoodsRecommend .jTitle a{color:#666;}
.userjGoodsRecommend .jTitleName{font-size:22px;}
.userjGoodsRecommend .jTitleExtra{font-size:14px; font-weight:bold; float:right;}
.userjGoodsRecommend li{float:left; width:240px; padding:5px 0; margin:0 3px; overflow:hidden; display:inline; position:relative;}
.userjGoodsRecommend .jItem{height:auto;}
.userjGoodsRecommend .jPic{position:relative; text-align:center; background:#fff; _height:100%; border:solid 1px #f1f1f1;}
.userjGoodsRecommend .jPic img{vertical-align:top;}
.userjGoodsRecommend .jPic img.err-product{background:url(//misc.360buyimg.com/lib/skin/e/i/error-jd.gif) no-repeat 50% 50%;}
.userjGoodsRecommend .jPic a{width:238px; height:238px; display:block; margin:0 auto;}
.userjGoodsRecommend .jGoodsInfo{overflow:hidden; position:relative; padding:8px 60px 5px 5px; background:#e6e6e6; margin-top:1px;}
.userjGoodsRecommend .jDesc{height:16px; line-height:1.3; font-size:12px; overflow:hidden;}
.userjGoodsRecommend .jDesc a{color:#666666; text-decoration:none;}
.userjGoodsRecommend .jDesc a:hover{text-decoration:underline;}
.userjGoodsRecommend .jDesc .jSlogan{color:#e33a3d!important;}
.userjGoodsRecommend .jPrice{height:18px; padding-top:7px; overflow:hidden;}
.userjGoodsRecommend .jPrice span{float:left; display:inline;}
.userjGoodsRecommend .jPrice .jsNumNo{text-decoration:none;}
.userjGoodsRecommend .jdPrice{float:right;}
.userjGoodsRecommend .jdPrice .jRmb{font-size:12px; color:#D21E20;}
.userjGoodsRecommend .jdPrice .jText{font-size:12px; color:#D21E20;}
.userjGoodsRecommend .jdPrice .jdNum{font-size:22px; color:#D21E20;}
.userjGoodsRecommend .jdPrice .jdNumNo{font-size:12px;}
.userjGoodsRecommend .jSalePrice{text-decoration:line-through; color:#999; font-weight:bold; overflow:hidden;}
.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:0; bottom:0;}
.userjGoodsRecommend .jBtnArea a{display:block; background:#e33a3d url(//img10.360buyimg.com/cms/g12/M00/01/02/rBEQYVGDK5sIAAAAAAAI7OBo0A0AAANqgH1uosAAAkE619.gif) center center no-repeat;  width:55px; height:55px; 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; display:none;}
.userjGoodsRecommend .jPromotionTextArea{overflow:hidden; text-align:center; padding-top:22px; line-height:1.2; color:#fff;}
.userjGoodsRecommend .jPromotionText1{display:block;}
.userjGoodsRecommend .jPromotionNum{}
.userjGoodsRecommend .jPromotionText2{}
最后编辑: admin  文档更新时间: 2020-03-23 17:36   作者:admin