像Facebook时间线一样堆叠2列可变高度的div

Question

有人怎么能这样做？我想创建一个自然的内容流.我现在面临的问题是div只会相互排列.它们不会通过相对侧浮动块的底部边缘.

下图清楚地显示了该问题.假设我有4个具有可变高度的div.

• Div1,始终向左开始
• Div2始终显示在右侧
• Div3位于左侧或右侧,具体取决于Div1和Div2的高度
• Div4,在这种情况下,Div4不会坚持Div2的底部
• Div5,出现同样的问题

因此,divs> Div2的位置应该由前面div的高度决定.

Answer 1

检查Facebook的CSS和HTML后,我发现他们实现用这个list和交替float的li元素之间left和right(即每个偶数元素是浮动的右边)

例如:

HTML

<ul>
    <li>...</li>
    <li>...</li>
    <li>...</li>
</ul>

CSS

li {
    clear: left;
    float: left;
    display: block;
    height: 100px;
    width: 200px;
    margin-bottom: 10px;
}

li:nth-child(2n) {
    clear: right;
    float: right;
}

工作示例:http://jsfiddle.net/gBVPj/

只有当一侧的元素不超过另一侧的两个元素的高度时,此方法才有效.例如,在图表中,如果框2的高度大于框1和3的高度,则框5将被移位并与框4一致.

像这样:http://jsfiddle.net/gBVPj/1/

我没有在Facebook上找到这个问题的例子(一个元素永远不会超过两个的高度)所以我相信他们已经考虑到了这一点.他们可能通过使用JavaScript实现这一点 - 如果检查元素,它们具有data-height与元素高度匹配的属性.

Answer 2

我昨晚做了这个工作，发现了一个相当简单的方法。

比较左列和右列的底部位置，将新的 li 元素追加到值较小的一侧，可以通过以下方式完成：

var last_left_post = $('.left:last');
var last_right_post = $('.right:last');
var left_position = 0;
var right_position = 0;

left_position = last_left_post.height() + last_left_post.offset().top;
right_position = last_right_post.height() + last_right_post.offset().top;

if(left_position<=right_position){
    $('#timeline').append('<li class="left"></li>');
}else{
    $('#timeline').append('<li class="right"></li>');
}

.left 和 .right 使用与您相同的 css。