不知道大家有没有经常观注Facebook，不过我是经常观注他，时时了解他的Web页面的设计与变化，因为我很喜欢他的风格。最近看到Facebook的一个比较明显的变化——Facebook Timeline。

这一变化把我吸引了，仔细看了他们的源代码，但不懂js的我来说，实现风格并不难，但是要实现功能还是相当的困难。没办法的情况之下只好借助GG在网上搜索“Facebook Timeline design”。终于找到一篇Srinivas Tamada写的《Facebook Timeline Design using JQuery and CSS.》教程。于是马上自己跟着动手写了一个，觉得很有意思，并不是想像中的那么难，稍加整理一翻，贴上来与大家一起分享。

从上图中可以看到“Facebook Timeline”效果是一个以时间为主线，主线左右两边有很多个block，并且在主线上点击会弹出一个文本输入，让你添加内容，从而显示到页面上。请看下面的示意思图：

大概了解了“Facebook Timeline”是什么东东后，我们就一起跟着Srinivas Tamada写的《Facebook Timeline Design using JQuery and CSS.》教程一起来学习如何制作自己的“timeline”效果。

需要的资源

制作这个效果我们首先需要准备两样东西，第一个是jQuery的版本库，另外一个就是制作瀑布流效果的插件jQuery Masonry plugin。有了这两样东东后，就可以进入后面的制作。

HTML Markup

第一步先创建一个容器div,这里把称为“div#container”，同时这个容器是可以放置多个div元素，并且此处给其一个类名“item”，另外在每个“div.item”放置一个“div.inner”:

<div> <div> <div>Block Content</div> </div> [...] <div> <div>Block Content</div> </div> </div>

注：这只是最初步的HTML结构，随着后面的内容介绍，我们所需的结构会有一定的变化。请仔细留意。

先给这个Markup一个基本样式：

*{ margin: 0; padding: 0; } ul, ol { list-style: none outside none; } #container { width: 860px; margin: 0 auto; } .item { width: 408px; margin: 20px 10px 10px; float: left; background-color: #fff; border: 1px solid #b4bbcd; min-height: 50px; text-align: justify; word-wrap: break-word; } .inner { padding: 10px; }

经过上面的样式设置后，Block进行float后，如下图所示的效果：

很显然，上面的效果并不是我们期待的效果，块与块之间的距离太大了，那么我们需要怎样来处理呢？想要答案吗？请看第二步。

第二步：消除块与块之间的距离

前面一步，我们有一个很不理想的效果，就是块与块之间的距离太大了，那么这一步，我们就来看是如何让块与块之间的效果都是一致的。答案很简单，使用jquery和Masonry插件实现。这也就是前面为什么说需要准备jQuery的版本库和jQuery Masonry plugin的原因(有关于jQuery Masonry plugin的详细介绍请点击这里)。下面别的不多说，请看如何调用：

调用库和插件

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="js/jquery.masonry.js"></script>

启用Masonry插件

<script type="text/javascript" > $(function(){ // masonry plugin call $('#container').masonry({itemSelector : '.item',}); }); </script>

下面一起来看看运用了jQuery Masonry plugin后的效果：

第三步：制作timeline导航

上面完成了区块的效果设置，接下来这一步主要是制作Timeline导航的效果，在这里在“div#container”容器中添加一些需要使用的HTML标签用来制作“timeline”导航：

HTML Markup

<div> <!-- TimeLine导航 --> <div> <div> <div></div> </div> </div> <div> <div>Block Content</div> </div> [...] <div> <div>Block Content</div> </div> </div>

结构添加完成后，我们需要对其样式进行设置

CSS Code

/*timeline navigatior css*/ .timeline_container { width: 16px; text-align: center; margin: 0 auto; cursor: pointer; display: block; } .timeline{ margin: 0 auto; background-color: #e08989; display: block; float: left; height: 100%; left: 428px; margin-top: 10px; position: absolute; width: 4px; } .timeline:hover{ cursor: pointer; margin: 0 auto; } .timeline div.plus{ width: 14px; height: 14px; position:relative; left: -6px; }

接下来使用jQuery来改为“div.plus”的背景图片：

jQuery Code

//timeline_container add mousemove event $(".timeline_container").mousemove(function(e){ var topdiv = $("#containertop").height(); var page = e.pageY - topdiv - 26; $(".plus").css({ "top": page + "px", "background":"url('images/plus.png')", "margin-left": "1px" }); }).mouseout(function(){ $(".plus").css({ "background":"url('')" }); });

完成后的效果就变成下图所示的风格：

第四步：给item块加上箭头效果

这一步主要实现的效果是，给每个“div.item”的块加上箭头效果，如果“div.item”的在左边加上“向右箭头”，反之加上“向左箭头”。