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

You can read the Pinterest cofounder's response to an earlier question about this: how to replicate pinterest.com's absolute div stacking layout

Answer 2

Easiest and Simple way i did, this looks armature. But i thought of sharing.....

This is three column layout...

First 3 container will not add height to it.. 4th container will take the height and top position of 1st container(that is prev().prev().prev())

counter = counter+1;
if(counter > 3){
var getTop = $(this).prev().prev().prev().offset();
var getLeft = $(this).prev().prev().prev().offset();
var getHeight = $(this).prev().prev().prev().height();
var countTPH = getTop.top + getHeight - 20;
$(this).css({"position":"absolute","top":countTPH+"px","left":getLeft.left+"px"});
            }

I have put prev() just to make reader understand the code simple1