google+相册中相片无缝对齐的实现 | 顾建伟个人博客
现在的位置: 首页 > Google+ > 正文
google+相册中相片无缝对齐的实现
2014年04月26日 Google+, 电脑相关 ⁄ 共 573字 暂无评论

分享到:


不得不说谷歌很牛X,盼望这google早点回来,google在香港建立的数据中心能早日能投入使用。本博客的图床大部分就是使用Google+的相册的,在使用的时候被相片无缝对齐这样的效果迷住了,下面就谈一谈他是如何实现的。来自网友:yulanggong的解答。 效果展示: https://plus.google.com/photos/105164175322388592868/albums/5708998284999176833 要达到的要求是:

  1. 图片大小随意
  2. 图片等比缩放,部分可以有裁切
  3. 图片间距相等(定值)
  4. 每行高相等(不同行高度可不等),第一张图片可以占两行
  5.  图片顺序从左到右,从上到下,先后顺序不变
  6. 不必填充满整个矩形

经过下面步骤可以达到类似 google 的效果

  1. 把所有图片等比缩放到相同高度
  2. 以类似文字流的方式填充到容器内
  3. 调节单行高度使左右对齐
  4. 最后一行不调节高度

考虑第一张图片占两行

  1. 第一张图片是定宽,右边剩下的区域用上面提到的方法填充两行
  2. 根据调整完的两行高度决定第一张图片的高度,并裁切
  3. 剩下的区域用上面提到的方法填充

用户浏览器的窗口发生变化时需要重新计算布局,并重新请求图片,可以把区域宽度传给服务器让服务器计算,并把结果返回;也可以服务器把图片的尺寸信息传给该浏览器,浏览器计算布局,再向服务器请求不同尺寸的图片。 做了张示意图,演示下计算布局的过程

说出你的想法!
有事加我的QQ:932404999(微博ID:顾建伟个人博客网)
×