V2EX = way to explore
V2EX 是一个关于分享和探索的地方
Sign Up Now
For Existing Member Sign In
• 请不要在回答技术问题时复制粘贴 AI 生成的内容
This topic created in 3858 days ago, the information mentioned may be changed or developed.
条件：
图片数量不固定（ 3-9 张）
每张图片宽高已知（长短边比例在 16:9 ~ 1:1 之间）
目标：
尽量让图片宽高比变化最小（不要裁剪掉太多）
也尽量让各图片尺寸保持均匀（不要有些特别大，有些特别小）
伤脑筋~~
Supplement 1 · Oct 14, 2015
就是类似下面的效果，只是这种布局最好能用算法算出来。
 |
1
hellov22ex Oct 14, 2015
瀑布流？
如果是，就控制它们间的缝隙 如果不是，这样子好看？ |
 |
2
pubby OP |
|
3
pubby OP |
 |
4
shuiniushushu Oct 14, 2015
还是要预先定好布局才好弄，不然算法得很复杂。如果是一次性的就手工排吧
|
 |
5
imn1 Oct 14, 2015
算法不清楚，个人觉得只是尺寸不会太难
这样的软件已经有不少了 |
|
6
pubby OP |
 |
7
zzetao Oct 14, 2015
网易云音乐的歌单封面只显示 4 张图片铺满一个矩形
歌曲少于 4 条，歌单封面默认显示最新一条歌曲图片 歌曲大于 4 条，歌曲封面显示最新 4 条歌曲封面，也就是这样子： http://p3.music.126.net/caZ2Ny7buMH4lVQOEDbKBQ==/3370003140324210.jpg?param=200y200 |
 |
9
tan90ds Oct 14, 2015  1
|
|
12
imn1 Oct 14, 2015 1
其实二维+可以缩放 /裁剪就很好做的
规则就两条： 1.长边和与宽边和趋向接近容器的长边与宽边 2.总面积趋向接近容器的面积 几个思路： 1.人类思维（填充） 先放入大面积，再放小面积，缺点是会头重脚轻，大面积会集中在某一端 2.演变填充 容器比较大的话，把容器分为分布均匀的小容器，每个小容器按上述 1 填充 3.计算机穷举 在允许缩放的范围内，计算所有图片的单边长和面积，依据两条规则排除不合适的 4.中心逼近 按边长先填入四周，中心部分以缩放调节 5.数学算法 请搜索“多边形填充算法” 6.视角、美学算法 不详，除了填充还要讲究排版的美学 |
 |
14
irainy Oct 14, 2015
搜一下： rectangle packing algorithm
|
 |
15
undeflife Oct 14, 2015
|
 |
16
yellowV2ex Oct 14, 2015
比如 google 的图片搜索，其实是 Aspect Fill ，也就是说缩略图的尺寸比例并非原图的比例，每排算一下数量，然后把多出来的宽度差平均或者放到影响最小的几个缩略图上就好啦。横竖混排的话计算一下双倍差最小的排到一起。
|
 |
17
canesten Oct 14, 2015
直接给你介绍工具可以吗？
|
 |
18
braineo Oct 14, 2015
是 exact cover problem 吗？
是的话可以 dancing links 跟 algorithm X |
|
20
pubby OP |
 |
21
ybh37 Oct 14, 2015
先设置几个模板，将所有的图片按宽高比例适配加载后再等比缩放。
|
|
22
canesten Oct 14, 2015
楼主是指 HTML 页面布局上的解决方案？
|
|
24
canesten Oct 14, 2015
那直接 texture packer 就完了嘛
https://www.codeandweb.com/texturepacker |
 |
25
zongwan Oct 14, 2015 1
MaxRects
Rectangle Bin Packing http://clb.demon.fi/projects/rectangle-bin-packing/ 之前在做 as3 的时候做过 sprites 工具时研究过 网上有源代码 大概五种算法 最后一种很慢 NP 问题 效果不一 按一定规则排序(个人经验不公开)放入图片 可固定得出近似最优解 随机图片顺序 生成的结果随机 |
 |
26
ccswizard Oct 14, 2015
装箱算法？
|
Select Language