V2EX = way to explore
V2EX 是一个关于分享和探索的地方
Sign Up Now
For Existing Member  Sign In
• 请不要在回答技术问题时复制粘贴 AI 生成的内容
lyz745704689
V2EX  ›  程序员

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

  •  
  •   lyz745704689 · Aug 2, 2018 · 1413 views
    This topic created in 2833 days ago, the information mentioned may be changed or developed.

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

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

    No Comments Yet
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   2907 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 09:09 · PVG 17:09 · LAX 02:09 · JFK 05:09
    ♥ Do have faith in what you're doing.