js实现时间轴自动排列效果

效果图：

代码如下：

 
 
 
 
 
 ul,li{
  list-style: none;
 }
 body{
  font-family: "microsoft yahei";
 }
 .clearfix:after {
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
  clear: both;
 }
 .cont{
  width:1000px;
  margin:0 auto;
 }
 .biz-timeline-box{
  width:785px;
  margin: 0 auto 45px;
 }
 
 .biz-timeline-box:nth-child(odd) .biz_timeline-eventbox{
  -webkit-border-radius: 0 40px 40px 0;
  -moz-border-radius: 0 40px 40px 0;
  border-radius: 0 40px 40px 0;
  float:right;
 }
 
 .biz-timeline-box:nth-child(even) .biz_timeline-eventbox{
  -webkit-border-radius: 40px 0 0 40px;
  -moz-border-radius: 40px 0 0 40px;
  border-radius: 40px 0 0 40px;
  float:left;
 }
 
 .biz-timeline-box:nth-child(odd) .biz_timeline-event{
  -webkit-border-radius:0 30px 30px 0;
  -moz-border-radius:0 30px 30px 0;
  border-radius:0 30px 30px 0;
 }
 
 .biz-timeline-box:nth-child(even) .biz_timeline-event{
  -webkit-border-radius: 30px 0 0 30px;
  -moz-border-radius: 30px 0 0 30px;
  border-radius: 30px 0 0 30px;
 }
 .biz-timeline-box:nth-child(odd) .biz_timeline-time{
  float:left;
  width:344px;
  text-align: right;
 }
 .biz-timeline-box:nth-child(even) .biz_timeline-time{
  float:right;
  width:344px;
  text-align: left;
 }
 .biz-timeline-box:nth-child(even) .biz_timeline-node{
  float:right;
 }
 .biz-timeline-box:nth-child(odd) .biz_timeline-node{
  float:left;
 }
 .biz_timeline-time{
  font-size:16px;
  color:#d81919;
  font-weight: 600;
  line-height:73px;
 }
 .biz_timeline-eventbox{
  width: 336px;
  height: 69px;
  border: 4px solid #d94646;
  text-align: center;
 }
 .biz_timeline-event{
  width:323px;
  height:57px;
  margin:6px;
  color:#fff;
  background:#d94646;
  text-align: center;
  font-size:16px;
  line-height:57px;
 }
 .biz_timeline-node{
  width:8px;
  height:8px;
  border-radius: 50%;
  background: #fff;
  border:4px solid #b22b2b;
  margin:29px 40px;
 }
 .biz_longString{
  position:absolute;
  left:50%;
  width:8px;
  height:200px;
  background:#bfbfbf;
  top:-57px;
  z-index:10;
  margin-left:-4px;
 }
 .biz_timtline-box{
  position: relative;
  margin-top:100px;
 }
 .biz_timeline{
  z-index:20;
  position:relative;
 }
 .biz_title{
  text-align: center;
  margin:0 auto 35px;
 }
 .biz_title h2{
  font-size:28px;
  color:#d81919;
 }
 .biz_title p{
  color:#eca7a7;
  margin-top:15px;
 }
 



 
 发展历程
 
ConMPANY HISTORY
 
 
 
  
  2012.12
  
  
   公司成立
  
  
  
  2013.02
  
  
   园区业务方向
  
  
  
  2014.03
  
  
   获天使轮投资900万元
  
  
  
  2013.09
  
  
   业务转型互联网营销
  
  
  
  2016.06
  
  
   V1.0版本上线
  
  
  
  2017.03
  
  
   期待。。。。
  
  
 
 
 

说明：新增一个时间节点：复制class="biz-timeline-box"的div。

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持考高分网！