雨夜带刀's Blog

非等宽图片列表的布局

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

searchlist_demo

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

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

先理下基本的需求:

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

雨夜带刀

前端开发工程师,技术宅,现居北京。

雨夜带刀的开源项目

easy.js
一个简洁的 JavaScript 类库,集成了模块加载器,同时也有包含了常见的的组件库,可访问项目网站
seed
符合 AMD 规范的 JavaScript 模块加载器。
ecope
从 easy.js 组件库中移值过来的基于 jQuery 的组件库,简单实用,API 风格统一。