How does the TED Talk home page organise the grid of videos?

Question

I've been trying to work out exactly how the TED Talk homepage works. Leaving aside all the animation rubbish, I find the way that the boxes are organised is really fascinating.

At first glance it looks like the jQuery masonry plugin, bu it quickly becomes clear that it tends to create several right angle triangle shapes, but has no fixed number of columns or rows, and the final shape produced is always completely solid (no hollow parts).

My initial assumption was that the boxes (their size is predetermined by some factor on the site) were sorted randomly and then sequentially added to the grid using a few simple rules, however I can't identify what those rules might be, or how they could prevent any hollows in the final shape.

Does anyone have any idea how this works?

Answer 1

Could be wrong but a few observations:

• Each section has 19 videos
• There are 4 sizes 1 (#1), 1/4 (#2), 1/16 (#3) and 1/32 (#4)

For a given section, there are always 4(#1). The number of (#2), (#3) and (#4) can be either:

• 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

As for the order:

• The first row always contains 2(#1) and 4(#2)
• (#4) are always at the bottom of a column