0

昨天我偶然发现了 Saatchi & Saatchi 网站，我真的很喜欢他们的布局如何使用看似随机的宽度来发布帖子，并且它在较小的窗口尺寸上调整得非常好。

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

在挖掘了一些源代码之后，看起来他们正在设置一个小、中或大的类。这些类具有特定的宽度，但是有一些 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的意义是什么？

4

1 回答 1

0

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

于 2013-09-22T21:27:23.610 回答