algorithm - TED Talk 主页如何组织视频网格？

Question

我一直在努力弄清楚 TED Talk homepage 到底是怎么回事作品。撇开所有的动画垃圾不谈，我发现盒子的组织方式真的很迷人。

乍一看，它看起来像 jQuery masonry plugin , 但很快就会发现它倾向于创建几个直角三角形，但没有固定的列数或行数，并且最终生成的形状始终是完全实心的(没有空心部分)。

我最初的假设是，这些框(它们的大小由网站上的某些因素预先确定)是随机排序的，然后使用一些简单的规则按顺序添加到网格中，但是我无法确定这些规则可能是什么，或者他们如何防止最终形状出现任何空洞。

有人知道这是怎么回事吗？

Answer 1

可能是错误的，但有几点观察:

• 每个部分有 19 个视频
• 有 4 种尺寸 1 (#1)、1/4 (#2)、1/16 (#3) 和 1/32 (#4)

对于给定的部分，总是有 4(#1)。 (#2)、(#3) 和 (#4) 的数量可以是:

• 4(#1), 10(#2), 4(#3), 1(#1) = 19
• 4(#1), 11(#2), 4(#3), 0(#1) = 19
• 4(#1), 11(#2), 3(#3), 1(#1) = 19
• 4(#1), 12(#2), 2(#3), 1(#1) = 19
• 4(#1), 13(#2), 1(#3), 1(#1) = 19

至于顺序:

• 第一行始终包含 2(#1) 和 4(#2)
• (#4) 总是在列的底部