热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

非等宽图片列表的布局

各大搜索引擎的图片频道的搜索结果页,搜索出来的结果都是较零碎的图片,图片质量、尺寸都是参差不齐的,并限定了每一行的总宽度。这种非等宽的图片列表,在Google+、flickr也都有

各大搜索引擎的图片频道的搜索结果页,搜索出来的结果都是较零碎的图片,图片质量、尺寸都是参差不齐的,并限定了每一行的总宽度。这种非等宽的图片列表,在Google+、flickr也都有用到。

技术分享

最近刚好对360搜索的图片搜索结果页进行了一次重构和改版,对于这种图片布局也花心思研究了一番,接下来说说我的一些处理思路。

非等宽的单个图片要排列到一个固定了宽度的容器中,那么这个等宽的容器就是最大的限制和障碍,开始怀念那种常见等宽瀑布流的布局(没有限制真好)。

先理下基本的需求:

  • 1、图片的宽度是不固定的;
  • 2、图片的高度是固定的;
  • 3、每行图片的总宽度是固定的,所以每行能容纳的图片的数量是无法确定的;
  • 4、确保图片质量不变,不能有拉伸变形导致图片失真的情况出现;
  • 5、图片之间的间距是固定的;

任意选取一组图片数据,计算图片宽度的总和,当宽度刚好大于或者等于一行的固定宽度,那么这就是一组待处理尺寸的原图,处理前的情况应该是这样的。

技术分享

以一行图片为单位,用一个 ul 列表来存放这一行图片,将 li 浮动。一组原图的宽度的总和通常都是大于一行的宽度,刚好相等的情况很少见,如果宽度过大,使用浮动的布局必然会让最后一张图掉下去。基本的 HTML 结构是下面这样的。

01
05  
06 class="img_list">
07   
  • "#">"demo.jpg" alt="">
  • 08   
  • "#">"demo.jpg" alt="">
  • 09   
  • "#">"demo.jpg" alt="">
  • 10   
  • "#">"demo.jpg" alt="">
  • 11   
  • "#">"demo.jpg" alt="">
  • 12

    为了尽量简化方法,这里先无视间距。

    裁切宽度

    那么每一组图片只要将多出来那部分的宽度(extraWidth)想办法解决掉就行了。为了保证图片不失真,可以使用裁切的方式,li 设置一个固定的宽度,并且设置 overflow:hidden,图片本身还是设置原图的尺寸,同时给图片设置负 marginLeft,确保图片是居中的。将多出来的那部分宽度通过对每张图片进行相同宽度的裁切,这样可以确保每张图片裁切得比较均匀。

    裁切的简单公式: 图片裁切的宽度(marginLeft) = 多出的宽度(extraWidth) / 图片的数量(imgLength) / 2

    下面是对单个图片的裁切。

    1
  • "width:100px;height:100px;overflow:hidden;">
  • 2   "#">
    3     "width:104px;height:100px;margin-left:-2px" src="demo.jpg" alt="">
    4   
    5

    裁切图片虽然能确保图片不失真,并保证每一行图片的行高是一样的,但会损失掉图片一部分左右边缘的内容,裁切掉的宽度的大小依据一行图片的数量多少来变化的,对于一行图片数较多的情况下(竖图较多),这种方法还是不错的。

    除了裁切还有其他的办法吗?

    等比缩放

    裁切是为了减小图片所占的宽度,并确保图片不失真,缩放同样也可以实现前面说到的两点,缩放的处理要比裁切会麻烦些。

    将前面计算出的extraWidth,通过对图片进行等比例缩放的方式,将缩放的宽度平均分配到每张图片上,这是对图片宽度的处理。

    缩放宽度的简单公式:图片缩放后的宽度(zoomWidth) = 图片原始宽度(imgWidth) – 多出的宽度(extraWidth) / 图片的数量(imgLength)

    既然是等比例缩放,对图片的宽度进行了缩放后,图片的高度也要按照相等的比例进行缩放。可以用第一张图片的高度作为基准高度。

    基准高度的简单公式:基准高度(baseHeight) = 图片原始高度(imgHeight) – 多出的宽度(extraWidth) / 图片的数量(imgLength)

    根据图片原始的宽度和缩放后的宽度的计算得出的缩放比例,就可以计算出每张图片应该等比例缩放的高度。这个缩放的高度和之前得到的基准高度会有一定的出入,如果缩放后的高度大于基准高度可以通过负 marginTop 的方法对图片的高度进行裁切,如果缩放后的高度小于基准的高度,可以再对图片进行等比例放大,然后再对宽度进行一定的裁切。通过这些处理,就可以保证每一行是等高的。

    等比缩放对图片的裁切会很小,基本不会损失掉原图边缘的内容,但是会让每一行的行高都不一样,无法固定行高。Google+ 和 flickr 就是采用的等比缩放的方法,这种方法对于大尺寸以及横图居多的情况很合适。

    不管是裁切还是缩放,一行图片在计算后都会有一定的误差值,需要对误差值进一步再做处理,这个不难,就不多说了。

    如果你也有好的处理办法,欢迎与我讨论。

    2014年1月28日更新了更优的算法:再谈等高瀑布流布局的算法。

    原载于:雨夜带刀’s Blog
    本文链接:http://stylechen.com/not-fixed-width-imglist-layout.html

    非等宽图片列表的布局


    推荐阅读
    • 本文介绍了SIP(Session Initiation Protocol,会话发起协议)的基本概念、功能、消息格式及其实现机制。SIP是一种在IP网络上用于建立、管理和终止多媒体通信会话的应用层协议。 ... [详细]
    • 理解浏览器历史记录(2)hashchange、pushState
      阅读目录1.hashchange2.pushState本文也是一篇基础文章。继上文之后,本打算去研究pushState,偶然在一些信息中发现了锚点变 ... [详细]
    • importjava.io.*;importjava.util.*;publicclass五子棋游戏{staticintm1;staticintn1;staticfinalintS ... [详细]
    • 本文详细探讨了BCTF竞赛中窃密木马题目的解题策略,重点分析了该题目在漏洞挖掘与利用方面的技巧。 ... [详细]
    • 使用Echarts for Weixin 小程序实现中国地图及区域点击事件
      本文介绍了如何使用Echarts for Weixin在微信小程序中构建中国地图,并实现区域点击事件。包括效果展示、条件准备和逻辑实现的具体步骤。 ... [详细]
    • ABP框架是ASP.NET Boilerplate的简称,它不仅是一个开源且文档丰富的应用程序框架,还提供了一套基于领域驱动设计(DDD)的最佳实践架构模型。本文将详细介绍ABP框架的特点、项目结构及其在Web API优先架构中的应用。 ... [详细]
    • 二维码的实现与应用
      本文介绍了二维码的基本概念、分类及其优缺点,并详细描述了如何使用Java编程语言结合第三方库(如ZXing和qrcode.jar)来实现二维码的生成与解析。 ... [详细]
    • 知识图谱与图神经网络在金融科技中的应用探讨
      本文详细介绍了融慧金科AI Lab负责人张凯博士在2020爱分析·中国人工智能高峰论坛上的演讲,探讨了知识图谱与图神经网络模型如何在金融科技领域发挥重要作用。 ... [详细]
    • 解决JavaScript中法语字符排序问题
      在开发一个使用JavaScript、HTML和CSS的Web应用时,遇到从SQLite数据库中提取的法语词汇排序不正确的问题,特别是带重音符号的字母未按预期排序。 ... [详细]
    • 本文详细介绍了如何正确设置Shadowsocks公共代理,包括调整超时设置、检查系统限制、防止滥用及遵守DMCA法规等关键步骤。 ... [详细]
    • 从CodeIgniter中提取图像处理组件
      本指南旨在帮助开发者在未使用CodeIgniter框架的情况下,如何独立使用其强大的图像处理功能,包括图像尺寸调整、创建缩略图、裁剪、旋转及添加水印等。 ... [详细]
    • Jupyter Notebook多语言环境搭建指南
      本文详细介绍了如何在Linux环境下为Jupyter Notebook配置Python、Python3、R及Go四种编程语言的环境,包括必要的软件安装和配置步骤。 ... [详细]
    • 嵌套列表的扁平化处理
      本文介绍了一种方法,用于遍历嵌套列表中的每个元素。如果元素是整数,则将其添加到结果数组中;如果元素是一个列表,则递归地遍历这个列表。此方法特别适用于处理复杂数据结构中的嵌套列表。 ... [详细]
    • SQL Server 存储过程实践任务(第二部分)
      本文档详细介绍了三个SQL Server存储过程的创建与使用方法,包括统计特定类型客房的入住人数、根据房间号查询客房详情以及删除特定类型的客房记录。 ... [详细]
    • 本文介绍了如何将Spring属性占位符与Jersey的@Path和@ApplicationPath注解结合使用,以便在资源路径中动态解析属性值。 ... [详细]
    author-avatar
    小菜鸡
    新手
    PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
    Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有