本文介绍了一种基于JQuery实现的完美图片蒙太奇效果，用于将多个大小不同的图片拼接成图片墙。在开发一个宠物服务网站的过程中，作者发现现有的图片墙实现存在缺陷，于是自行设计了一种算法，确保横竖完美对齐，并在窗口大小变化时自动调整布局。实际应用在http://www.teyua.com/photo.jsp，欢迎界面爱好者交流优化建议。
完美图片蒙太奇的JS效果基于JQuery实现（多个大小不同图片拼接成图片墙）
最近开发一个宠物服务网站 http://www.teyua.com/ 里面有个照片更新栏目，需要实现这个功能。
参考了很多，包括国外的图片墙，就是把多个大小不一样的图片根据一个算法整齐的组合成为图片墙。
需要实现的功能有：自动拼接，横竖都要完美对齐，窗口大小变化是自动调整，最后依然完美对齐，同时还要兼容大部分浏览器。
网上找到的所有实现，都有缺陷，包括百度www.badu.com的图片搜索，组合的图片都有缺陷，看下图，右侧部分红框，边缘未对齐。
Bing的图片搜索http://cn.bing.com/images?FORM=Z9LH拼接的图片墙也有缺陷，而且比百度还严重，请看下图中间红框，未对齐，出现了差异。
由于没有找到完美实现只有自己搞定了，仔细计算了算法。借助JQuery，终于完美实现，看下图。实际效果请看http://www.teyua.com/
最低0.47元/天 解锁文章
扫一扫
1356
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
