有谁知道 Pinterest.com 的布局是如何工作的? [英] Does anyone know how Pinterest.com's layout works?

问题描述

在 http://pinterest.com/ 上有图钉"，即高度不同的

，但它们似乎都渲染非常好，没有间隙"或换行符来中断流程.是否有一个很好/简单的解释来说明他们如何让 CSS 表现和实现它(我希望学习和理解而不是仅仅崇拜他们的 CSS 文件！).提前致谢

解决方案

查看 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屋！