热门标签 | 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

    非等宽图片列表的布局


    推荐阅读
    • 题目链接:http://poj.org/problem?id=3083。题目描述:给定一个迷宫,其中 'S' 表示起点,'E' 表示终点,'#' 表示墙壁,'.' 表示可通行的道路。起点和终点均位于迷宫的边界上,并且保证存在唯一路径。任务是求从起点 'S' 到终点 'E' 的最短路径步数,且优先考虑向左转弯。通过深度优先搜索(DFS)和广度优先搜索(BFS)算法进行路径探索,分析两种方法的优劣及适用场景。 ... [详细]
    • 在Python编程中,探讨了并发与并行的概念及其区别。并发指的是系统同时处理多个任务的能力,而并行则指在同一时间点上并行执行多个任务。文章详细解析了阻塞与非阻塞操作、同步与异步编程模型,以及IO多路复用技术的应用。通过模拟socket发送HTTP请求的过程,展示了如何创建连接、发送数据和接收响应,并强调了默认情况下socket的阻塞特性。此外,还介绍了如何利用这些技术优化网络通信性能和提高程序效率。 ... [详细]
    • C++ STL 常见函数应用详解与实例解析
      本文详细解析了 C++ STL 中常见函数的应用,并通过具体实例进行说明。特别地,文章对迭代器(iterator)的概念进行了深入探讨,将其视为一种将迭代操作抽象化的工具,便于在不同容器间进行元素访问和操作。此外,还介绍了迭代器的基本类型、使用方法及其在算法中的应用,为读者提供了丰富的实践指导。 ... [详细]
    • Git基础操作指南:掌握必备技能
      掌握 Git 基础操作是每个开发者必备的技能。本文详细介绍了 Git 的基本命令和使用方法,包括初始化仓库、配置用户信息、添加文件、提交更改以及查看版本历史等关键步骤。通过这些操作,读者可以快速上手并高效管理代码版本。例如,使用 `git config --global user.name` 和 `git config --global user.email` 来设置全局用户名和邮箱,确保每次提交时都能正确标识提交者信息。 ... [详细]
    • 本文详细探讨了Java集合框架的使用方法及其性能特点。首先,通过关系图展示了集合接口之间的层次结构,如`Collection`接口作为对象集合的基础,其下分为`List`、`Set`和`Queue`等子接口。其中,`List`接口支持按插入顺序保存元素且允许重复,而`Set`接口则确保元素唯一性。此外,文章还深入分析了不同集合类在实际应用中的性能表现,为开发者选择合适的集合类型提供了参考依据。 ... [详细]
    • 在BZOJ 2563中,阿狸与桃子进行了一场策略博弈游戏。该问题的时间限制为3秒,内存限制为128MB,目前已有97次提交记录。通过对游戏规则和策略的深入分析,本文探讨了双方在不同情况下的最优决策路径,并提出了高效的算法解决方案。 ... [详细]
    • 在基于.NET框架的分层架构实践中,为了实现各层之间的松散耦合,本文详细探讨了依赖注入(DI)和控制反转(IoC)容器的设计与实现。通过合理的依赖管理和对象创建,确保了各层之间的单向调用关系,从而提高了系统的可维护性和扩展性。此外,文章还介绍了几种常见的IoC容器实现方式及其应用场景,为开发者提供了实用的参考。 ... [详细]
    • Node.js 教程第五讲:深入解析 EventEmitter(事件监听与发射机制)
      本文将深入探讨 Node.js 中的 EventEmitter 模块,详细介绍其在事件监听与发射机制中的应用。内容涵盖事件驱动的基本概念、如何在 Node.js 中注册和触发自定义事件,以及 EventEmitter 的核心 API 和使用方法。通过本教程,读者将能够全面理解并熟练运用 EventEmitter 进行高效的事件处理。 ... [详细]
    • 本文深入探讨了ASP.NET中ViewState、Cookie和Session三种状态管理技术的区别与应用场景。ViewState主要用于保存页面控件的状态信息,确保在多次往返服务器过程中数据的一致性;Cookie则存储在客户端,适用于保存少量用户偏好设置等非敏感信息;而Session则在服务器端存储数据,适合处理需要跨页面保持的数据。文章详细分析了这三种技术的工作原理及其优缺点,并提供了实际应用中的最佳实践建议。 ... [详细]
    • 为了在Fragment中直接调用Activity的方法,可以通过定义一个接口并让Activity实现该接口来实现。具体步骤包括:首先在Fragment中声明一个接口,并在Activity中实现该接口。接着,在Fragment中通过类型转换检查Activity是否实现了该接口,如果实现了则调用相应的方法。这种方法不仅提高了代码的解耦性,还增强了模块间的通信效率。此外,还可以通过ViewModel或LiveData等现代Android架构组件进一步优化这一过程,以实现更加高效和可靠的通信机制。 ... [详细]
    • 深入解析 OpenCV 2 中 Mat 对象的类型、深度与步长属性
      在OpenCV 2中,`Mat`类作为核心组件,对于图像处理至关重要。本文将深入探讨`Mat`对象的类型、深度与步长属性,这些属性是理解和优化图像操作的基础。通过具体示例,我们将展示如何利用这些属性实现高效的图像缩小功能。此外,还将讨论这些属性在实际应用中的重要性和常见误区,帮助读者更好地掌握`Mat`类的使用方法。 ... [详细]
    • PHP中元素的计量单位是什么? ... [详细]
    • 在ASP.NET MVC项目中,通过实战解决了Ajax请求500错误及多表数据查询的问题。具体而言,将页面分为两个部分,用户点击右侧导航栏时,通过Ajax请求动态加载数据,并在右侧显示相应的页面内容。最初尝试使用Partial Action方法,但遇到了500错误。通过详细排查和调试,最终成功解决了这一问题,并实现了预期功能。此外,还优化了多表数据查询的性能,确保系统的高效运行。 ... [详细]
    • 在 HihoCoder 1505 中,题目要求从给定的 n 个数中选取两对数,使这两对数的和相等。如果直接对所有可能的组合进行遍历,时间复杂度将达到 O(n^4),因此需要考虑优化选择过程。通过使用哈希表或其他高效的数据结构,可以显著降低时间复杂度,从而提高算法的效率。具体实现中,可以通过预处理和存储中间结果来减少重复计算,进一步提升性能。 ... [详细]
    • 题目描述非常吸引人。每颗星星可以通过其在窗口的左下角和右上角位置构建两条扫描线,从而将问题转化为区间增减和求最大值的操作。需要注意的是,位于边界的星星不应计入结果,因此在处理时应分别对左右边界进行适当的增减调整。此外,利用线段树和离散化技术可以显著提高算法效率,确保在大规模数据下的性能表现。 ... [详细]
    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社区 版权所有