砖石画格答案

【问题标题】：Masonry-like picture grid砖石画格
【发布时间】：2014-07-01 18:48:50
【问题描述】：

我一直在想这个复杂的问题，我确信有一个简单的答案或其他途径可以找到解决方案。

我想要完成的是一个随机的图像网格。我有一组图像，我想将它们排列在一个齐平的网格中。我的意思是我希望网格中没有任何间隙。以下是一些示例图片：

主要规格：

容器/单元格的比例必须使图像能够适应而不倾斜
网格必须齐平。它不能有任何间隙，包括最后一行。

我遇到的问题是我无法提出或表达一个可以创建我想要完成的表 maxtrix 的公式。 Masonary 是我正在寻找的 99.9%，除了网格没有考虑图像大小，也没有结束齐平。所以这 1% 就是我不考虑使用它的原因。

我不是在寻找特定于 javascript 的，因为这与数学有关，所以我计划在 PHP 中创建布局，然后在 javascript 中提供功能。

任何帮助或指点将不胜感激。

【问题讨论】：

好吧，我想2d box-packing 是一个开始的地方，但是要想找到一个绝对没有机会空白空间的方法可能需要一些额外的调整和操作。
如果您在 PHP 中执行此操作，请考虑使用 GD 或 ImageMagick 进行图像缩放和调整，以确保布局按您的意愿工作。当然，您正在钻研创建您正在使用的主图像的衍生图像，但是像这样的动态美学并不容易。
@JakeGould 这正是我打算使用的。这样我就可以确保图像在其容器中可见。刚刚提出网格矩阵就是我卡住的地方。这是一个我无法形容的矩阵。
@andbeyond 谢谢！这是一个有趣的算法，可以帮助我解决这个问题。现在看看这个，看看它是否有帮助！
也许这会对你有所帮助：Grid generation & division & Detecting gaps in grid of divs

标签： php javascript jquery math

【解决方案1】：

您的示例图像按行排列。此外，您没有写任何关于固定总大小的内容，所以我假设可以随意选择整个布局的纵横比。在这种情况下，您可以尝试以下方式：

将所有图像排列在一个单行行中，方法是固定高度并选择宽度以保持纵横比。
将该单行拆分为多行。在这里，您可以使用多种启发式方法，根据您的喜好调整最终结果。但是任何解决方案都可以满足您所说的要求。
缩放每一行，使它们都具有相同的宽度，然后将它们堆叠起来。

显然这只是一个粗略的轮廓。真正困难的部分是如何将图像分布到不同的行。一个目标可能是组合具有相似纵横比的图像，以使最终图像具有相似的大小。您可以为每个比率计算将导致所需图像区域的首选图像高度，然后组合具有相似高度要求的图像，直到缩放到共同高度产生的宽度与您希望的最终行的宽度相匹配。但其他方面也将发挥作用，例如。制作类似宽度的行，以及类似的东西。

您可能会在其他答案和 cmets 中找到有关目标的建议，然后玩弄它们，直到找到您喜欢的。

【讨论】：

【解决方案2】：

Justified-Gallery 看起来是一个解决方案，here is the site with examples。

【讨论】：