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

问题描述

在 http://pinterest.com/ 上有'pins'，即< div>的变化高度，但他们都似乎非常好，没有间隙或断线，以中断流。是否有一个好的/简单的解释，他们如何让CSS行为和实现（我希望学习和理解，而不仅仅是货运他们的CSS文件！提前感谢

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

推荐答案

查看JQuery Masonry，它将是实现所需布局的最简单方法。 http://masonry.desandro.com/

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

我做了一些阅读的Pinterest的javascript几个月前来搞清楚自己。简而言之，他们根本不用CSS。他们通过迭代它们所有的，计算高度，并将它放在任何一个具有最短高度的列的底部（添加框的高度），动态地定位所有的盒/引脚。基本上，没有把戏，它只是Javascript。

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