首页 > 代码库 > 在等高响应式布局理的一些问题

在等高响应式布局理的一些问题

①   高度调整公式会产生百分比,浏览器是会直接取整,因此可能会产生-2到2px的误差;

解决方法:调整后记录每行误差值gap,然后循环把gap的值分给同行每一张图片,这样前2张图片可能会有±1px的图片宽度变化,但是用户基本觉察不了图片的轻微拉伸变化。

②   等高响应式布局里用户图片数可能过少,会有图片只有1-3张占不满一行的情况,该怎样显示布局;

解决方法:判断只有1行图片的时候不作布局调整,少于1行则默认显示等高变化后的图片即可(即只调整一次,不需要为剩余值再自适应)。

③    每行调整前的剩余宽度过大,导致调整后宽高很大;

解决方法:若调整后宽高是原始宽高的150%左右则该行舍弃,这里考虑到整体图片质量,确保不影响图片墙效果。

④ 用户上传的照片太小,例如16×16的小图标,如果一样的方式调整会与400×800这些图片并列放大,造成很大缩放比。

解决方法:考虑到是图片墙的效果,一般不会有用户传一些其他的图片,例如表情素材等等,同时在图片处理时可以加一个排序,获取了图片宽高后把小于一定值的图片排在最后再一起显示;