Does Anyone Know How Pinterest.Com's Layout Works

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

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.

Anybody have any idea how the divs are emitted in pinterest.com?

Each item is placed dynamically with JavaScript. Try viewing it with JS turned off. They are probably using Masonry, Isotope, or something similar.

how to replicate pinterest.com's absolute div stacking layout

You could also check on the jQuery Plug-in Masonry, for this kind of functionality.

Is it possible to create a pinterest-like layout with Bootstrap only?

Found a (free) template at http://bragthemes.com/demo/pinstrap/. It's supposed to have all you are asking for. Haven't had time to check it out, though.

Edit 2016-03-15: Bootstrap 4 allows this out of the box here. It's still in alpha, but we're getting there.

How can i get the pinterest-like layout with tailwind and react?

This type of layout is called Masonry. It is currently implemented in firefox under experimental options.
There is also an npm package for positioning your elements in such a grid.

---

Related Topics