请教个图片木桶布局中的问题

2018-08-02 15:32:43 +08:00
 lyz745704689

计算一行图片的数量时,为什么需要 <累计宽度于行宽的差大于行高> 呢,直接拿累计宽度和行宽作比有什么问题吗?

实现木桶布局的图片尺寸处理主要有以下步骤: 1、设置行高、行宽、边距 2、获取图片高、宽 3、将每个图片高度设置为行高,并等比例缩放图片宽度 4、遍历图片尺寸数组,从第一个图片开始,累计图片宽度,并将图片放入一个数组,当加上第 n+1 个图片的宽度后,累计宽度与行宽的差大于行高,从第 n+1 个图片开始重新累计图片宽度,并重新第 n+1 个开始放入新的数组中,以此获取多个包含着若干图片宽度之和与行宽相近的数组,将它们整成二维数组以便下一步处理。 5、将预处理好的二维数组,再次遍历,先计算图片处理后的宽度之 width 和与行宽 row_width 之比 ratio,再用行高 row_height 与该 ratio 相除,获取等比例 width 等比例缩小成 row_width 得到的图片高度 height,这个 height 就是图片实际应该设置的高,接下来按 height 通过等比例缩放来获取图片实际应该设置的宽度 img_width,并更新原数组中的宽度。 6、处理后的数组就差不多是可实现木桶布局的图片尺寸了,但由于之前的计算中,由于可能浮点数运算然后四舍五入导致出现误差,所有还需要矫正一下,累计每一个图片组的宽度之和,计算与行宽的误差 over_width,然后通过为每组最后一个图片增减 over_width,矫正误差。

1259 次点击
所在节点    程序员
0 条回复

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/476298

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX