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

Question

在http://pinterest.com/上有不同高度的'引脚'，即

s，但它们似乎都表现得很好，没有'空白'或换行符来中断流程。是否有一个好的/简单的解释，他们如何得到CSS的行为和实现(我希望学习和理解，而不仅仅是货物崇拜他们的CSS文件!)。提前感谢

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

我做了一些阅读Pinterest的javascript几个月前弄清楚这个自己。简而言之，他们根本不使用CSS。它们通过迭代所有盒子/插脚来动态定位它们，计算高度，并将其放置在当前具有最短高度的任何列的底部(将该盒子的高度添加到其中)。基本上没有什么技巧，就是Javascript。

Css实际上不能按你想要的方式。像这个例子一样，Javascript可以。

由于浮动行或内联阻塞内容的行为，css不适合这项工作。您必须动态地生成垂直的内容列，并将它们并排放置，这意味着您必须努力将当前的内容放在顶部。那会很痛苦的，真的。你还会失去对窗口宽度的响应。

你可以阅读Pinterest的联合创始人对这个问题的回答:如何复制pinterest.com的绝对div堆叠布局

现在可以使用css3

.three-col {
   -moz-column-count: 3;
   -moz-column-gap: 20px;
   -webkit-column-count: 3;
   -webkit-column-gap: 20px;
 }

完整指南见:http://kmsm.ca/2010/an-almost-complete-guide-to-css3-multi-column-layouts/

查看了所有选项后，我最终以这种方式实现了类似于Pinterest的布局:

所有div为:

div.tile {
    display: inline-block;
    vertical-align: top;
}

这使得它们在行中的位置比浮动时更好。

然后当页面加载时，我在JavaScript中迭代所有div以消除它们之间的间隙。

1. div的高度差别不大。
2. 你不介意一些小的违反顺序(下面的一些元素可以拉到上面)。
3. 你不介意底线有不同的高度

这种方法的好处-你的HTML对搜索引擎来说是有意义的，可以在Javascript被防火墙禁用/阻止的情况下工作，HTML中的元素序列匹配逻辑序列(新项目在旧项目之前)。你可以在http://SheepOrPig.com/news

看到它在工作

我做的最简单的方法，这看起来很成熟。但是我想到了分享.....

这是三栏布局…

前3个容器将不添加高度。第四个集装箱将取第一个集装箱(即prev().prev().prev())的高度和顶部位置

counter = counter+1;
if(counter > 3){
var getTop = $(this).prev().prev().prev().offset();
var getLeft = $(this).prev().prev().prev().offset();
var getHeight = $(this).prev().prev().prev().height();
var countTPH = getTop.top + getHeight - 20;
$(this).css({"position":"absolute","top":countTPH+"px","left":getLeft.left+"px"});
            }

我把prev()只是为了让读者理解代码simple1

Andrews的回答太棒了!我一直在寻找解决办法，终于找到了……正如安德鲁所写的定位…这是我的JS片段。虽然不完美，但方向是正确的。谢谢安德鲁!

var tilename = 6;
for (var i = 0; i < document.querySelectorAll('#tiles .t').length; i++) { 
    document.getElementsByClassName("t"+tilename)[0].style.top = document.getElementsByClassName("t"+(tilename-5))[0].offsetHeight + 10;
    tilename += 1;
}

原理很简单:在这里，我在几分钟内写了我自己的。http://jsfiddle.net/92gxyugb/1/

coffescript

tiles = $('.tiles .t')
container = $('.tiles').width()
width     = $('.tiles .t:first').width()
columns_height = {}
columns   = Math.floor container / width
space     = container % width 
space     = space / (columns-1)
for tile,i in tiles
  column_index = i % columns
  columns_height[column_index] ?= 0
  sp = switch column_index 
    when 0 then 0
    when columns then 0
    else 
      space * column_index
  $(tile).css
    top: columns_height[column_index]
    left: (column_index * width)+sp
  columns_height[column_index] += $(tile).height()+space
max_height = 0
for k,v of columns_height
  if v > max_height  
    max_height = v
$('.tiles').height max_height-space

html

<div class='tiles'>
  <div class='t t1'></div>
  <div class='t t2'></div>
  <div class='t t3'></div>
  <div class='t t4'></div>
  <div class='t t5'></div>
  <div class='t t6'></div>
  <div class='t t7'></div>
  <div class='t t8'></div>
  <div class='t t9'></div>
  <div class='t t10'></div>
  <div class='t t11'></div>
  <div class='t t12'></div>
  <div class='t t13'></div>
  <div class='t t14'></div>
  <div class='t t15'></div>
  <div class='t t16'></div>
</div>

css

.tiles {position: relative; width: 500px; background: rgb(140,250,250); }
.t { position: absolute; width: 87px; background: rgb(100,100,100); }
.t1 { height: 100px; }
.t2 { height: 140px; }
.t3 { height: 200px; }
.t4 { height: 180px; }
.t5 { height: 120px; }
.t6 { height: 150px; }
.t7 { height: 180px; }
.t8 { height: 200px; }
.t9 { height: 120px; }
.t10 { height: 160px; }
.t11 { height: 210px; }
.t12 { height: 160px; }
.t13 { height: 150px; }
.t14 { height: 150px; }
.t15 { height: 130px; }
.t16 { height: 170px; }