javascript - 如何创建pinterest样式的布局，但元素具有不同的宽度，相同的高度

昨天我偶然发现了萨奇＆萨奇（Saatchi＆Saatchi）网站，我真的很喜欢他们的布局如何使用看似随机的宽度来布置帖子，并且在较小的窗口尺寸下可以很好地调整其大小。

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的意义是什么？

最佳答案

贪婪的算法是先按先后排序项目，然后将第一个项目放到适合的第一行，然后遍历下一个项目。如果没有剩余的行，则可以在列表中循环时添加更多行。您可以寻找一维装箱算法。

关于javascript - 如何创建pinterest样式的布局，但元素具有不同的宽度，相同的高度，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18948744/