图片墙布局算法
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
不规则图片布局算法 @wangqun
假设红框的高度等于1，那么
!!!!
= !!
,!
,
!!!!
= !!
,!
,
!!!!
= !!
,!
给定一个高度ℎ!，那么
!!!!
=
!!!
,!!
,
!!!!
=
!!!
,
!!
,
!!!!
=
!!!
,
!!
所以相应的宽度如下，
!!!!
*
ℎ!= w !!,
,
!!!!
*
ℎ!= w !!,
,
!!!!
* ℎ!= w !!,
如果 w !!,
+ w !!,
+ w !!,
= w 屏幕,
，即可推出
!!!!
* ℎ!+ !!!!
* ℎ!+ !! !!
*ℎ! = w !!,+ w !!,+ w !!,
= w 屏幕
, 推出
w 屏幕
,=ℎ! *
!!!!
!!!!
因为w 屏幕,
已知，所以ℎ!
=
!屏幕,
!!!
!
!!!!
通过ℎ!可以求出每张图片显示宽度,
!!!! =
!!!
,!!
,
!!!!
= !!!
,
!!
,
!!!!
=
!!!
,
!!
!!
!!
∗ ℎ! = w !!,
,
!!
!!∗ ℎ! = w !!,
, !! !!
∗ ℎ! = w !!,
每张图片的显示高度ℎ!，如果图片原始高度小于ℎ!，
那么这张图片显示高度等于ℎ!,
=
!!",
!!!
最终效果：
每行图片张数按照规则： w 屏幕 ,
< w !!!!!
w 屏幕,
>
w !!!!!!!