图片列表页的显示方法

一个图片列表页 ，需要展示一些图片的缩略图，用户点击每幅图片之后，能够看到相应的图片详细展示页，可以看到大图。

这样的需求在很多网站中都是很常见的，

下面我们看看这其中存在的问题。

 

通常情况下，我们都是像一个表格一样，把图片显示在一些相同大小的单元格里，这样显得整齐划一。

但是由于图片的长宽尺寸都是不一样的，有横图（宽>高），有竖图（高>宽），

所以，如何来显示这些图片，就成了一个问题。

 

 一般的做法有这么几种。

 

一、最简单的方法，固定图片的宽高，使得所有的缩略图的显示大小都一样，如下图所示。

     缺点自然也很明显，那就是图片都变形了，挺难看的。

 

       

 

二、可以允许图片在不超过单元格显示框的前提下，按比例缩放，保持长宽比，这样图片就不变形了。

      如下图所示，横图的话，就上下空着，竖图的话，就左右空着，看起来也比较舒服。

 

 

 

三、仍然是等比例缩小，只不过是要将整个显示区域都填满，超出的部分就隐藏起来。

 

 

 

四、跟三的效果差不多，只不过是在产生缩略图的时候，就进行剪裁操作，使得生成的缩略图跟单元格的大小一般大就行了。

      这样的效果最好，但是如果一旦客户端显示区域大小调整就麻烦了，所以只针对相对比较固定的少数图片的时候可以采用这种方法。

 

 

//按比例缩放图片，by ciqq
var scaleImage = function(o, w, h){ 
    var img = new Image(); 
    img.src = o.src; 
    if(img.width >0 && img.height>0) 
    { 
        if(img.width/img.height >= w/h) 
        { 
            if(img.width > w) 
            { 
            o.width = w; 
            o.height = (img.height*w) / img.width; 
            } 
            else 
            { 
            o.width = img.width; 
            o.height = img.height; 
            }            
        } 
        else 
        { 
            if(img.height > h) 
            { 
            o.height = h; 
            o.width = (img.width * h) / img.height; 
            } 
            else 
            { 
            o.width = img.width; 
            o.height = img.height; 
            }           
        } 
    } 
} 


var clipImage = function(o, w, h){ 
    var img = new Image(); 
    img.src = o.src; 
    if(img.width >0 && img.height>0) 
    { 
        if(img.width/img.height >= w/h) 
        { 
            if(img.width > w) 
            {            
                o.width = (img.width*h)/img.height; 
                o.height = h; 
                //o.setAttribute("style", "marginLeft:-" + ((o.width-w)/2).toString() + "px");
                $(o).css("margin-left", "-"+((o.width-w)/2).toString() + "px");
            } 
            else 
            { 
            o.width = img.width; 
            o.height = img.height; 
            }            
        } 
        else 
        { 
            if(img.height > h) 
            { 
                o.height = (img.height*w)/img.width; 
                o.width = w; 
                //o.setAttribute("style", "margin-top:-" + ((o.height-h)/2).toString() + "px");
                //$(o).css("style", "margin-top:-" + ((o.height-h)/2).toString() + "px");
                $(o).css("margin-top", "-"+((o.height-h)/2).toString() + "px");
            } 
            else 
            { 
                o.width = img.width; 
                o.height = img.height; 
            }           
        } 
    } 

}