Question

在http://pinterest.com/上有'pin'，即＆lt; div＆gt; s的高度不同但它们似乎都很好地呈现，没有'间隙'或换行符来中断流程。是否有一个很好/简单的解释，说明他们如何让CSS表现和实现（我希望学习和理解而不仅仅是货物崇拜他们的CSS文件！）。提前致谢

Answer 1

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

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

Answer 2

Css实际上无法以您希望的方式执行。 Javascript，like this example，可以。

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

Answer 3

您可以阅读Pinterest联合创始人对之前有关此问题的回复：how to replicate pinterest.com's absolute div stacking layout

Answer 4

您现在可以使用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/

Answer 5

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

所有DIV都是：

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

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

然后在加载页面时，我迭代JavaScript中的所有DIV以消除它们之间的间隙。它适用于以下情况：

DIV的身高差异不大。
你不介意一些轻微违反订购的行为（下面的一些元素可以在上面提取）。
你不介意底线有不同的高度。

这种方法的好处 - 您的HTML对搜索引擎有意义，可以使用Javascript禁用/阻止防火墙，HTML中的元素序列与逻辑顺序（旧版之前的较新项）匹配。你可以看到它在http://SheepOrPig.com/news

Answer 6

我做的最容易和最简单的方式，这看起来很蠢。但我想分享.....

这是三栏布局......

前3个容器不会增加它的高度。第4个容器将取第1个容器的高度和顶部位置（即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()仅用于让读者理解代码简单1

Answer 7

安德鲁斯的回答令人惊叹！我正在寻找一个解决方案，最后得到它......正如安德鲁通过定位写的那样..这里是我的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;
}

Answer 8

它的简单工作方式：在这里，我写了几分钟。 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; }

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

8 个答案: