timeline时间线的实现方法

facebook，人人网都推出了“时间线”或叫“时间轴”，用于以时间段来查看用户的行为。

时间线呈现类似这样的效果：

 

 

每个单元框是一个li，如何按时间顺序将他们排列在时间轴的两端呢？这里注意每个单元框的高度都不一样，因为用户每个时刻做的行为是不同的。所以不能都用float:left来写，否则会是这样的效果：

 

显然左右单元框都没有错落排列，不是我们想要的效果。

解决方法：单元框分成两列，奇偶相隔，左列框一律float:left，右列框一律float:right。这在框高度不一致的情况下也出了问题，这是因为浏览器会自动去补左右的高度差，用右边的单元框去补左边的空档。

 为了避免上述情况，我们在分配左右列的时候不能平均进行，而是应该根据每个单元框的高度来：即，如果当前左列高度大于右列，那么下一个单元框应该放到右列去。
js代码如下：

 

$(function(){
	var n=$('li').length;
	var h=new Array(n,2);
	for (var i=0;i<n ;i++ )
	{
		h[i]=[$($('li')[i]).outerHeight()+30,0];
	}
	h[1][1]=1;
	var suml=0,sumr=0;
	for (i=2;i<n ;i++ )
	{
		for (var j=0;j<i ;j++ )
		{
			if (!h[j][1])
			{
				suml+=h[j][0];
			}
			else
			{
				sumr+=h[j][0];
			}
		}
		if (suml>sumr)
		{
			h[i][1]=1;
		}
		suml=0;
		sumr=0;
	}
	for (var i=1;i<n ;i++ )
	{
		if (h[i][1])
		{
			$('li')[i].className='right';
		}
	}
});

  我定义了一个二维数组h[][]，用于保存所有单元框的高度和单元框属于左列还是右列（左列的话h[i][1]=0,右列h[i][1]=1）。根据单元框之前的左列右列高度来定位单元框是属于左列还是右列。最后给属于右列的li单元框加上classname=right。

 时间线是ul的背景图实现的，位置居中。单元框的箭头和对应点也是图片实现的。

 

这只是一个非常粗浅简单的时间线，展现一下facebook时间线的大致原理，facebook本身时间线的算法要更复杂更精准，有精力大家可以去研究。

 

附代码下载