如何更好地自定义单元样式

[lucky-leung]

在ANALYZERESPONSE新建了一个组装方式，自定义了单元样式（复制第二种）。
code如下
function (h){
var strrt = _strReturn(h);
if( strrt ){
return strrt;
}

        var ret = [[],true];


        // 转json对象
        try{
            var jsn = $.isPlainObject(h) ? h : $.parseJSON(h)
        }catch(e){
            console.log(e)
            // 如果parse 失败，直接返回初始状态的 ret;
            return ret;
        }

        // 判断jsn 请求是否成功返回数据
        if(jsn.success){
            var $rt = $(null),
                dat = jsn.data;
            for(var i=0,d=dat.theme,l=d.length; i<l; i++){
                var unt = [

                        '<div class="woo col-xs-4 col-md-4 zt-container" >' 
                        +'<div ><img class="featurette-image img-responsive" src="data:image/png;base64," data-src="holder.js/500x500/auto" alt="Generic placeholder image"></div>'
                        +'<div class="carousel-caption zt-title"><h1>专题名称</h1><p>专题解说</p></div>'
                        +'<div class="zt-detail"><p>共有<span>116</span>篇文章，8分钟前更新</p></div>'
                        +'</div>'

                    ].join('')

                $rt = $rt.add($(unt))
            }
            ret = [$rt.toArray(),dat.has_next]
        }
        return ret;
    }

但是当在页面显示出来时，会比我自定义的单元框多了少少样式代码，导致与页面样式很看。如何更好的自定义自己的单元样式呢？

[balibell]

如果仅仅只是样式的问题，使用 chrome开发工具查看多出的是哪些样式，并且定位到相应的css 文件进行修改。

如果还没解决，请联系我的 qq 54180405

另注图片瀑布流注意事项：
1、在 main.css 中有示例demo 用的css ，如果你想重写单元，请不要使用 main.css
2、在返回的json数据里要提供每张图片的宽、高信息，否则无法准确计算高宽
3、

如果你已经提前知道了整个区块（包括图片）的高度，请将高度值放入 data-ht=""
4、关于ajax 分页数据请参看 #6

[email protected]

发件人： lucky-leung
发送时间： 2014-03-02 20:21
收件人： duitang/waterfall
主题： [waterfall] 如何更好地自定义单元样式 (#17)
在ANALYZERESPONSE新建了一个组装方式，自定义了单元样式（复制第二种）。
code如下
function (h){
var strrt = _strReturn(h);
if( strrt ){
return strrt;
}
var ret = [[],true];

    // 转json对象
    try{
        var jsn = $.isPlainObject(h) ? h : $.parseJSON(h)
    }catch(e){
        console.log(e)
        // 如果parse 失败，直接返回初始状态的 ret;
        return ret;
    }

    // 判断jsn 请求是否成功返回数据
    if(jsn.success){
        var $rt = $(null),
            dat = jsn.data;
        for(var i=0,d=dat.theme,l=d.length; i<l; i++){
            var unt = [

                    '<div class="woo col-xs-4 col-md-4 zt-container" >' 
                    +'<div ><img class="featurette-image img-responsive" src="data:image/png;base64," data-src="holder.js/500x500/auto" alt="Generic placeholder image"></div>'
                    +'<div class="carousel-caption zt-title"><h1>专题名称</h1><p>专题解说</p></div>'
                    +'<div class="zt-detail"><p>共有<span>116</span>篇文章，8分钟前更新</p></div>'
                    +'</div>'

                ].join('')

            $rt = $rt.add($(unt))
        }
        ret = [$rt.toArray(),dat.has_next]
    }
    return ret;
}

但是当在页面显示出来时，会比我自定义的单元框多了少少样式代码，导致与页面样式很看。如何更好的自定义自己的单元样式呢？
—
Reply to this email directly or view it on GitHub.