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

Question

我一直在努力弄清楚TED Talk主页是如何工作的.撇开所有的动画垃圾,我发现盒子组织的方式真的很吸引人.

乍一看,它看起来像jQuery砌体插件,很快就会发现它倾向于创建几个直角三角形形状,但没有固定数量的列或行,并且产生的最终形状总是完全坚固(没有空心部件) ).

我最初的假设是,盒子(它们的大小是由网站上的某个因素预先确定的)是随机排序的,然后使用一些简单的规则顺序添加到网格中,但是我无法确定这些规则可能是什么,或者它们如何可以防止最终形状的任何凹陷.

有谁知道这是如何工作的？

Answer 1

我想我已经解决了。

首先，项目数量差异很大，我当前查看的页面只有 13 个框。

首先，我将从最大到最小的 4 种大小的块分别命名为：A、B、C、D

我们知道，第一“行”包含两个 A 和两个垂直的 B 堆栈，例如：

 _______________________
|   A   | B |   A   | B |
|       |___|       |___|
|       | B |       | B |
|_______|___|_______|___|

这些的排列看起来是随机的，但 B 总是处于相同的垂直模式。刚才看这个我意识到只有两行，第二行的工作方式相同。

第二行的高度是第一行的两倍，占据页面的其余部分。它由水平堆叠的形状图案组成，这些形状图案（至少部分）是随机选择的。

我发现了 9 个这样的形状图案，其中两个是单个 A 或 B，其余的是：

  _______    _______    _______    ___    ___    _______    ___
 | B | B |  |   A   |  | B | B |  |C|C|  | B |  |   A   |  |C|C|
 |___|___|  |       |  |___|___|  | B |  |___|  |       |
 |   A   |  |       |  | B | B |  |___|  |C|D   |       |
 |       |  |_______|  |___|___|                |_______|
 |       |  | B | B |  |   A   |                | B |    
 |_______|  |___|___|  |       |                |___|    
 |B  |C|    |B  |C|    |       |
 |___|      |___|      |_______|

下一个问题是如何选择这些？可能需要一些巧妙的搜索来找到最佳配置：例如，如果要显示 X 个项目，我们需要找到总共 X 个不超过行宽度的配置。

这可以通过图案密度的度量来完成，该度量是块的数量除以图案的宽度。