所属分类:网页特效-UI/布局/瀑布流,时间日期
使用方法:
引入CSS样式
<link href="Css/style.css" type="text/css" rel="stylesheet">
引入jQuery库文件
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/blog.plug.js"></script>
插件初始化、参数配置
$(document).ready(function() {
/*时间轴*/
$('#Container').masonry({itemSelector : '.item'});
function Arrow_Points(){
var s = $("#Container").find(".item");
$.each(s,function(i,obj){
var posLeft = $(obj).css("left");
if(posLeft == "0px"){
html = "<span class='rightCorner'></span>";
$(obj).prepend(html);
} else {
html = "<span class='leftCorner'></span>";
$(obj).prepend(html);
}
});
}
Arrow_Points();
});
HTML结构
<!--ShowMsg-->
<div id="Container">
<div class="timeline_container">
<div class="timeline">
<div class="plus"></div>
<div class="plus2"></div>
</div>
</div>
<div class="item">
<h3> <span class="fl">柳州一通网</span> <span class="fr">IP:221.7.207*** 2013-02-21 08:46:29</span> </h3>
<p class="con">帮我做的网站很好,很满意<br />支持一下下。。。</p>
<h4><b>Reply:</b>管理员尚未回复</h4>
</div>
<div class="item">
<h3> <span class="fl">柳州</span> <span class="fr">IP:221.7.207*** 2013-02-21 08:39:32</span> </h3>
<p class="con">很有创意</p>
<h4><b>Reply:</b>管理员尚未回复</h4>
</div>
<div class="item">
<h3> <span class="fl">伪装的心</span> <span class="fr">IP:218.56.32*** 2013-02-21 08:07:48</span> </h3>
<p class="con">很不错的页面啊<br />支持一下下。。。</p>
<h4><b>Reply:</b>管理员尚未回复</h4>
</div>
<div class="item">
<h3> <span class="fl">千里</span> <span class="fr">IP:111.11.189.*** 2013-02-20 23:52:25</span> </h3>
<p class="con">给你留言</p>
<h4><b>Reply:</b>管理员尚未回复</h4>
</div>
<div class="item">
<h3> <span class="fl">漫画之迷</span> <span class="fr">IP:119.137.61.*** 2013-02-20 23:00:25</span> </h3>
<p class="con">网站真不错啊,漫画情不自禁地在此留了个言,哈哈。。。</p>
<h4><b>Reply:</b>管理员尚未回复</h4>
</div>
<div class="item">
<h3> <span class="fl">水墨寒</span> <span class="fr">IP:27.224.56*** 2013-02-20 22:42:43</span> </h3>
<p class="con">自己先把沙发坐了!水墨寒个人官网(<a href="http://www.smohan.net/" target="_blank">http://www.smohan.net/</a>)正式开通!欢迎大家留意</p>
<h4><b>Reply:</b>管理员尚未回复</h4>
</div>
</div>
<!--/ShowMsg-->