javascript - 如何创建一个 pinterest 风格的布局，但元素具有不同的宽度，相同的高度

Question

我昨天偶然发现了 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的意义是什么？

Answer 1

贪心算法是先按withdth对元素进行排序，然后将第一个元素放在适合它的第一行中，然后循环遍历下一个元素。当没有剩余行时，您可以在遍历列表时添加更多行。您可以寻找一维装箱算法。