有谁知道 Pinterest.com 的布局是如何工作的? [英] Does anyone know how Pinterest.com's layout works?
问题描述
在 http://pinterest.com/ 上有图钉",即高度不同的
查看 JQuery Masonry,它将是实现您想要的布局的最简单方法.http://masonry.desandro.com/
几个月前我阅读了一些 Pinterest 的 javascript 以自己解决这个问题.简而言之,他们根本不使用 CSS.他们通过遍历所有框/引脚来动态定位所有框/图钉,计算高度,然后将其放置在当前高度最短的列的底部(添加该框的高度).基本上,它没有什么技巧,它只是 Javascript.
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
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.
这篇关于有谁知道 Pinterest.com 的布局是如何工作的?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!