[转载]一种效果还不错的图片排列策略 - ChaunceyHao - 博客园

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

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

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

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

点顶部导航中的“相册”或者点这里可以看到实际效果，想知道具体策略继续往下看。

每个图片容器都是绝对定位，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一下再重新排，不然看起来有点奇怪，也影响性能。