堆叠div的可变高度在2列像Facebook时间轴 [英] Stacking divs with variable height in 2 columns like Facebook Timeline

问题描述

有没有人如何做到这一点？我想创造一个自然的内容流。我现在面临的问题是，divs只会排成一排。它们不会通过相对侧的浮动块的底部边缘。

Does anyone how I can do this? I want to create a natural flow of content. The problem that I now face is that the divs will only line up next to each other. They will not pass the bottom edge of the floated block on the opposite side.

下图清楚地显示了问题。

The following illustration clearly shows the problem. Let's say that I have 4 divs with variable heights.

• Div1，总是从左开始


• Div2


• Div4，位于左侧或右侧，取决于Div1和Div2的高度
在这种情况下，Div4不会贴在Div2的底部

• Div5，同样的问题会出现

• Div1, always starts left
• Div2, always is displayed on the right side
• Div3, is on the left or right side, depending on the hight of Div1 and Div2
• Div4, in this situation, Div4 doesn't stick to Div2's bottom
• Div5, same problem occurs

因此，divs> Div2的位置应由之前div的高度决定。

So, the position of the divs > Div2 should be determined by the height of the previous divs.

推荐答案

相当简单的方法来做。

比较左列和右列的底部位置，将新的li元素附加到具有较小值的边上，这可以做通过以下方式：

Compare the bottom position of the left column and the right column, append the new li element to the side with smaller value, which can be done by th e following way:

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。

.left and .right using the same css as you do.

这篇关于堆叠div的可变高度在2列像Facebook时间轴的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！