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


Tags: css,layout

Problem :

On http://pinterest.com/ there are 'pins' ie <div>s of varying height but they all seem to render very well with no 'gaps' or line breaks to interrupt the flow. Is there a good/simple explanation of how they get the CSS to behave and implement that (I am hoping to learn and understand rather than just cargo-cult their CSS file!). Thanks in advance



Solution :

Check out JQuery Masonry, it will be the simplest way to achieve the layout you want. http://masonry.desandro.com/

I did some reading of Pinterest's javascript a few months ago to figure this out myself. In short, they don't do it with CSS at all. They position all of their boxes/pins dynamically by iterating through them all, calculating the height, and dropping it at the bottom of whichever column that has the shortest height at the moment (adding that box's height to it). Basically, there's no trick to it, it's just Javascript.


    CSS Howto..

    How to style this value with jQuery

    How Do I Make Li Clickable for Radio Button Inside

    How to make a fully responsive web page [closed]

    how to vertical align a table inside a div

    How do I add a css class to an Div element in JQuery?

    How to locate a pointed div element in css

    How to stop css class on textbox

    How to auto adjust parent DIV height according to the contents in child DIV?

    CSS - how to set a position of UL in LI

    How Polymer Hero Transition works

    how to overwrite css height set by jquery/javascript?

    How to correctly apply the .clearfix:after class to HTML?

    How do I automatically resize an image for a mobile site?

    How to set just a percentage of a color in CSS?

    How to use ASP.NET Authorization Yet Permit Access to .css Files?

    how can resize the page? [closed]

    How to align with css

    How to position a CSS sprite background image within the element?

    Why does this menu render poorly in Firefox 3.5 and IE7? How do I adapt?

    How to style span radio buttons with CSS without images

    How to get the complete css information if css class is given form the used style sheets files

    CSS - How to break a line only at division borders

    How to use CSS to create the left - right alignment so the left div does not push the right div

    How do I trigger successive CSS transforms with transitions using jQuery's .css()?

    How can I resize a background-image to fit my element (without set width) in CSS 2?

    CSS to keep middle image in 100% width slideshow always in center

    How to create a box with line and add icon on side [closed]

    How can I make a filter like this? [closed]

    How to construct CSS selector targeting attribute with value containing an ASCII line feed?

    Jquery: How to check if the element has certain css class/style