V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
lyz745704689
V2EX  ›  程序员

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

  •  
  •   lyz745704689 · 2018-08-02 15:32:43 +08:00 · 1142 次点击
    这是一个创建于 2100 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    实现木桶布局的图片尺寸处理主要有以下步骤: 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,矫正误差。

    目前尚无回复
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1326 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 17:00 · PVG 01:00 · LAX 10:00 · JFK 13:00
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.