如何创建一个pinterest风格的布局，但项目有不同的宽度，相同的高度

Question

我偶然发现了萨奇＆amp; amp;萨奇网站昨天和我真的很喜欢他们的布局如何使用看似随机的宽度作为他们的帖子，它在小窗口尺寸上调整得非常好。

http://saatchi.com/en-us/

在深入研究一些源代码之后，看起来他们正在设置一个Small，Medium或Large类。这些类具有特定的宽度，但是有一些JS算法使它们填充每一行。我的主要问题是，我如何确保它们符合排列，或者没有太大的尺寸？看起来小尺寸，中尺寸和大尺寸都是在它们的后端输入，但是随着更新的帖子出现，它们会被推下来，因此解决方案无法通过在后端选择正确的尺寸来确保它们适合。

容器宽1356像素。以下是我提出的尺寸：

&.small{

    width: 208px;//235 -- difference of 27
}

&.medium{

    width: 317px;//344 -- difference of 27
}

&.large{

    width: 426px;//454 -- difference of 28
}

注释中的值是由JS设置的值，并且它仅在某些项目上设置，不知何故，它们为一些div添加了27或28个像素以使一切都适合。有没有人对他们的逻辑如何运作有任何想法？ 27的意义是什么？

Answer 1

一个贪婪的算法是首先按顺序对项目进行排序，然后将第一个项目放在适合的第一行中并循环显示下一个项目。当没有剩下的行时，您可以在循环列表时添加更多行。您可以查找1d bin-packing算法。