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

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

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

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

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

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

一般的做法有这么几种。

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

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

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

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

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

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

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

//按比例缩放图片，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; 
            }           
        } 
    }

}

转载于:https://www.cnblogs.com/laoci/archive/2011/08/19/2146363.html

图片列表页的显示方法相关推荐

  1. 让wordpress首页和分类列表页只显示文章标题列表

    http://up2u.72pines.com/2009/07/rangwordpressshouyehefenleiliebiaoyezhixianshiwenzhangbiaotiliebiao/ ...

  2. vue项目实现从商品列表页跳转详情页后，返回列表页保持页面在原位置，且列表页刷新的方法

    vue项目实现从商品列表页跳转详情页后,返回列表页保持页面在原位置,且列表页刷新的方法 页面跳转后回退保持原位置 App.vue页面中使用keep-alive缓存组件 <template> ...

  3. 织梦标签：列表页排序显示的方式汇总!

    织梦 {dede:list}列表按多种排序显示 orderby='sortrank' 文档排序方式 orderby='hot' 或 orderby='click' 表示按点击数排列 orderby=' ...

  4. ecshop商品列表页增加/显示货号SN

    ECSHOP商品列表页如何增加货号即SN.默认情况下在商品列表页也就是category.php以及search.php页面是不显示货号的, 但是有时候为了便于区别,需要在商品列表页显示货号SN怎么办, ...

  5. dede php分页代码,织梦用dede:sql实现列表页分页教程方法

    将dede:list标签进行改造了,熟悉dede的朋友应该知道这个列表页专用标签的工作原理大致是先通过栏目变量id获取到对应的数据源再呈现到页面上来,那么我们就可以让它不仅仅通过栏目变量id还可以通过 ...

  6. php标题 栏目不显示title,DEDECMS专题列表页不显示title的解决方法

    今天发现自己站里的专题列表页面里调用的专题列表图片和a标签的title都没有显示,找到模板文件里看了下才发现dede:list标签中title调用的都是[field:fulltitile],由于专题的 ...

  7. php 抓取京东搜索页,京东商品列表页爬虫采集方法 - 八爪鱼采集器

    采集场景 在京东搜索页 https://search.jd.com/Search 输入关键词搜索,采集搜索后得到的多个商品列表数据. 鼠标放到图片上,右键,选择[在新标签页中打开图片]可查看高清大图 ...

  8. django-演练-老师列表页的显示-通过table显示

    目标 通过表格表现老师的相关信息 主要包括 老师ID,老师姓名,老师所带的班级 注意 老师与班级属于多对多关系 老师与班级两个表的关系通过第三张表关联 显示的时候,不仅要查老师表,而且还要查询关联的班 ...

  9. PHP实现列表页综合筛选功能,dede织梦列表页联动筛选方法功能的实现

    [DEDECMS.织梦开源程序已经成为市场上主流仿站开源代码,它能够非常快速的放置一个已经建立好的网站,但是前提是这些网站比较简单,没有一些复杂的功能,那么使用DEDECMS仿站是最快速,最有效的.而 ...

最新文章

  1. vb中5种打开文件夹浏览框的方法总结(转)
  2. IOS和Andriod手机浏览器内核
  3. Matlab练习：timer（定时器3）
  4. 程序员容易不能生育？
  5. 毕业论文计算机附录模板,毕业论文格式是什么，附录又是什么?
  6. potainer 日志_日志系统落地：制定日志规范
  7. python求第n个质数_找到第n个质数：麻木
  8. 支付页面设计灵感|最美剁手的正确姿势！
  9. [Luogu 3835]【模板】可持久化平衡树
  10. Consider renaming one of the beans or enabling overriding by setting
  11. centos选择php7 作为默认版本_树莓派下安装Nginx+Php7.3 搭建Web服务器
  12. ug区域轮廓铣没有重叠距离_UG加工基本操作
  13. 微信也QQ服务器,妄想山海QQ区还是微信区好 平民服务器选择推荐
  14. 强大的发包工具fine packet builder
  15. 2020.10-2021.01前端开发部分总结
  16. 代码随想录第十四天 二叉树基础 LeetCode 144、145、94
  17. 如何做一份淹没的水深分布图
  18. Lora SX1278芯片 模块引脚的功能介绍
  19. 关于支付(支付宝和微信)
  20. 我的世界java版mac切视角_我的世界怎么视角切换攻略 第三人称视角

热门文章

  1. python pso_利用python实现PSO算法优化二元函数
  2. c语言迷宫求解毕业设计,毕业设计（论文）-基于Windows平台C语言实现迷宫游戏的设计.doc...
  3. c语言单链表功能,[数据结构]单链表（C语言）的各种功能
  4. java 优势论文_【是时候升级java11了】 jdk11优势和jdk选择
  5. java io流区别_Java中IO流的分类和BIO,NIO,AIO的区别
  6. python 收发邮件_Python 【收发邮件】
  7. Spark源码阅读——DirectInputDStream
  8. IDEA 隐藏编辑器顶部 Tab 栏
  9. python函数——形参中的：*args和**kwargs
  10. js控制文件拖拽，获取拖拽内容。