一种效果还不错的图片排列策略

QuQuBlog 相册中的图片列表,之前是把图片定高,容器定宽来排的。这样实现起来简单粗暴,但在图片大小不一,尤其是横竖图片混排时,竖着的图片两侧很空,不好看,还占地方。

最近,用了一种新策略来改进图片排列,效果大约是这样:

在各种分辨率下都是这样的效果:

  • 列表左右两侧对齐;
  • 每个图片容器边距一致;
  • 图片定高,不压缩不拉伸,尽可能保证原本高宽比例。

点顶部导航中的“相册”或者点这里可以看到实际效果(@update 2014.02.10,博客改版,现在已经没有相册了),想知道具体策略继续往下看。

每个图片容器都是绝对定位,hidden掉overflow;图片容器高度总等于图片高度,宽度和位置是在页面加载完和每次窗口resize时算出来的。计算的步骤如下:

  1. 首先得到图片列表容器宽度containerWidth;
  2. 让每个图片容器的宽度等于自己图片的宽度;
  3. 循环图片容器列表,把图片容器分成若干行。确保每行宽度rowWidth大于或等于containerWidth(大部分情况是少一张宽度不够,多一张宽度就超过了,所以rowWidth一般都大于containerWidth);
  4. 如果rowWidth大于containerWidth,根据图片容器原始宽度在rowWidth所占比例,把超过的部分平均分给每个容器。这样每个容器宽度都减少了一些,列表右侧就是对齐的;
  5. 经过上一步,大部分图片容器宽度都小于图片宽度,给图片负margin,保证居中显示;
  6. 根据图片容器所在行数和顺序设置容器top和left位置;
  7. 最后根据图片容器总行数设置列表容器高度containerHeight。

上面的策略用QWrap写出来也就几十行。由于图片容器都是绝对定位,可以方便地加上动画。最后,窗口resize时要delay一下再重新排,不然看起来有点奇怪,也影响性能。

本文链接:参与评论 »

--EOF--

提醒:本文最后更新于 1975 天前,文中所描述的信息可能已发生改变,请谨慎使用。

专题「Web 产品思考」的其他文章 »

Comments