Does anyone know how Pinterest.com's layout works?

Question

On http://pinterest.com/ there are \'pins\' ie

s of varying height but they all seem to render very well with no \'gaps\' or line breaks to interrupt the flow. Is

Answer 1

Its simple how it works: Here, I wrote my own in a matter of minutes. http://jsfiddle.net/92gxyugb/1/

coffescript

tiles = $('.tiles .t')
container = $('.tiles').width()
width     = $('.tiles .t:first').width()
columns_height = {}
columns   = Math.floor container / width
space     = container % width 
space     = space / (columns-1)

for tile,i in tiles
  column_index = i % columns
  columns_height[column_index] ?= 0
  sp = switch column_index 
    when 0 then 0
    when columns then 0
    else 
      space * column_index
  $(tile).css
    top: columns_height[column_index]
    left: (column_index * width)+sp
  columns_height[column_index] += $(tile).height()+space

max_height = 0
for k,v of columns_height
  if v > max_height  
    max_height = v
$('.tiles').height max_height-space

html

css

.tiles {position: relative; width: 500px; background: rgb(140,250,250); }
.t { position: absolute; width: 87px; background: rgb(100,100,100); }
.t1 { height: 100px; }
.t2 { height: 140px; }
.t3 { height: 200px; }
.t4 { height: 180px; }
.t5 { height: 120px; }
.t6 { height: 150px; }
.t7 { height: 180px; }
.t8 { height: 200px; }
.t9 { height: 120px; }
.t10 { height: 160px; }
.t11 { height: 210px; }
.t12 { height: 160px; }
.t13 { height: 150px; }
.t14 { height: 150px; }
.t15 { height: 130px; }
.t16 { height: 170px; }