有谁知道Pinterest.com的布局如何运作？

Question

在http://pinterest.com/上有"引脚",即不同高度的<div>,但它们似乎都很好地呈现,没有"间隙"或换行符来中断流程.是否有一个很好/简单的解释,说明他们如何让CSS表现和实现(我希望学习和理解而不仅仅是货物崇拜他们的CSS文件!).提前致谢

Answer 1

查看JQuery Masonry,它将是实现您想要的布局的最简单方法.http://masonry.desandro.com/

几个月前我做了一些Pinterest的javascript阅读,以便自己解决这个问题.简而言之,他们根本不使用CSS.它们通过迭代所有的方框/引脚来动态定位它们,计算高度,然后将它放在当前具有最短高度的任何一列的底部(将该框的高度添加到它).基本上,它没有诀窍,它只是Javascript.

Answer 2

Css实际上不能以你想要的方式做到这一点.Javascript,就像这个例子一样,可以.

由于浮动或内联阻塞内容的行数如何,css不适合这项工作.您必须动态生成垂直内容列并将它们并排放置,这意味着您必须努力将当前内容放在最顶层.真的,这将是一种痛苦.你也失去了对窗口宽度的响应.