如何在网格中为“完全出血”调整图像大小
How to resize images for "full bleed" in grid?
以Google Images,flickr photostream等为例。每个图像都有不同的尺寸+无线电,但它们都排列在左侧+右侧。
我最初的逻辑是在javascript中循环浏览它们,弄清楚我何时处于下一个图像太宽的位置。然后我看到我有多少"空间"并全面增加宽度 - 但我最终使薄图像太宽。
像这样的事情是我正在做的事情:
maxwidth = 100;
width = 0;
imgs = [];
foreach image {
if (width + image.width > maxwidth) {
space = maxwidth - width / imgs.length;
foreach imgs {
img.width = img.width + space;
}
imgs = [];
width = 0;
}
imgs.push(image);
width += image.width;
}
这是分区问题;Johannes Treitz在这篇博文中讨论了它在照片库中的应用。建议的解决方案是:
- 要找到所需的行数 k,请将照片缩放到窗口高度的一半,将它们的宽度相加,除以窗口的宽度,然后四舍五入。
- 然后,照片的纵横比用作一组权重S。使用现有的线性分区算法找到 S 在 k 上的最佳分布。
该博客文章包含以下用于构建库的 CoffeeScript:
viewport_width = $(window).width()
ideal_height = parseInt($(window).height() / 2)
summed_width = photos.reduce ((sum, p) -> sum += p.get('aspect_ratio') * ideal_height), 0
rows = Math.round(summed_width / viewport_width)
if rows < 1
# (2a) Fallback to just standard size
photos.each (photo) -> photo.view.resize parseInt(ideal_height * photo.get('aspect_ratio')), ideal_height
else
# (2b) Distribute photos over rows using the aspect ratio as weight
weights = photos.map (p) -> parseInt(p.get('aspect_ratio') * 100)
partition = linear_partition(weights, rows)
# (3) Iterate through partition
index = 0
row_buffer = new Backbone.Collection
_.each partition, (row) ->
row_buffer.reset()
_.each row, -> row_buffer.add(photos.at(index++))
summed_ratios = row_buffer.reduce ((sum, p) -> sum += p.get('aspect_ratio')), 0
row_buffer.each (photo) -> photo.view.resize parseInt(viewport_width / summed_ratios * photo.get('aspect_ratio')), parseInt(viewport_width / summed_ratios)
linear_partition
函数实现如下(参见 github):
# Linear partition
# Partitions a sequence of non-negative integers into k ranges
# Based on Óscar López implementation in Python (http://stackoverflow.com/a/7942946)
# Also see http://www8.cs.umu.se/kurser/TDBAfl/VT06/algorithms/BOOK/BOOK2/NODE45.HTM
# Dependencies: UnderscoreJS (http://www.underscorejs.org)
# Example: linear_partition([9,2,6,3,8,5,8,1,7,3,4], 3) => [[9,2,6,3],[8,5,8],[1,7,3,4]]
linear_partition = (seq, k) =>
n = seq.length
return [] if k <= 0
return seq.map((x) -> [x]) if k > n
table = (0 for x in [0...k] for y in [0...n])
solution = (0 for x in [0...k-1] for y in [0...n-1])
table[i][0] = seq[i] + (if i then table[i-1][0] else 0) for i in [0...n]
table[0][j] = seq[0] for j in [0...k]
for i in [1...n]
for j in [1...k]
m = _.min(([_.max([table[x][j-1], table[i][0]-table[x][0]]), x] for x in [0...i]), (o) -> o[0])
table[i][j] = m[0]
solution[i-1][j-1] = m[1]
n = n-1
k = k-2
ans = []
while k >= 0
ans = [seq[i] for i in [(solution[n-1][k]+1)...n+1]].concat ans
n = solution[n-1][k]
k = k-1
[seq[i] for i in [0...n+1]].concat ans
相关文章:
- 内部分区字体大小获胜'调整浏览器窗口大小时不会随媒体查询而更改
- 调整窗口大小时,可拖动的对象会出现在容器外部
- ExtJS——在展开/折叠时调整面板高度
- 定义完全独立的样式信息
- Chrome应用程序调整窗口大小保持纵横比
- 完全可链接的li元素
- 如何自动调整标签的高度以适应内容
- 导航栏没有调整到浏览器屏幕的大小
- 调整屏幕大小后不显示子菜单
- 使用JavaScript根据窗口/视口的高度动态调整图像大小
- 合并两个数组,重新调整循环js
- 如何在内联依赖项并将图像转换为dataURI的情况下完全提取网页
- Morris.js折线图x轴标签在调整大小后消失
- Jquery/Ajax.serialize()未完全工作
- 调整缩放窗口高度提升缩放
- 黑色调整大小的画布不会随着时间的推移将绘图完全褪色为黑色
- 在视口调整大小时完全从 DOM 解绑 Jquery 插件
- 如何在网格中为“完全出血”调整图像大小
- 如何停止调整弹出窗口的大小完全低于一定的大小
- 如何调整dojo向量的大小(不完全是按比例缩放)