เพิ่มใน AppAsset 

'css/timeline.css','css/timeline_light.css'

'js/timeline.min.js'

เอาไฟล์ js ไปไว้ใน frontend/web/js

เอาไฟล์ css ไปไว้ใน frontend/web/css

script

 <script>
	
	 function last_msg_funtion(){
   			var rand = Math.floor(Math.random() * (4 - 3 + 1)) + 3;
	  //	var rand =4;
			document.getElementById("accumulate").value=Number(document.getElementById("accumulate").value)+rand;
			
	               //var ID=$(".message_box:last").attr("id");
	              
	                // ID++;
					var data= Number(document.getElementById("accumulate").value);
					//alert(data);
					var pos  = Number(document.getElementById("pos").value);
				
	          	  		if(  $( window ).width() < 1111 ) { var w=290;}
	                   if(  $( window ).width() < 888 ) { var w=560;}
	                   if(  $( window ).width() < 777 ) { var w=460;}
	                   if(  $( window ).width() < 666 ) { var w=380;}
	                   if(  $( window ).width() < 555 ) { var w=260;}
	                   if(  $( window ).width() < 444 ) { var w=240;}
	                   if(  $( window ).width() < 333 ) { var w=240;}
				   
	 $.ajax({
		// type: 'POST',
		
		
		 url:frontend_url+"/info/get_inform_timeline?pos="+pos+"&data="+data+"&w="+w,
		 dataType:'json',
		 success:function(timeline_data){
			  document.getElementById("pos").value= timeline_data.pos;
			  
			  
	                 var timeline = new Timeline($('#timeline'), timeline_data.data);
	               if(  $( window ).width() < 888 ) {var center="center";}else{var center='dual';}
	                 timeline.setOptions({
	                     animation:   true,
	                     lightbox:    true,
	                     showYear:    true,
	                     allowDelete: false,
	                     columnMode:  center,
	                     order:       'desc'
	                 });
                    
	                 timeline.display();
	 	    		 
                    
		 }	
		
	 });
    

	 
				 $(window).scroll(function(){
 
				                                  $("div[class=\"timeline_element slider animated\"]").attr("style","width:90% !important;");
				                                  $("div[class=\"timeline_element iframe animated\"]").attr("style","width:90% !important;");
				                                  $("div[class=\"timeline_element blog_post animated\"]").attr("style","width:90% !important;");
				                                  $("div[class=\"timeline center\"]").attr("style","width:90% !important;");

				if  ($(window).scrollTop() == $(document).height() - $(window).height()){
 				   		
						
				       //  last_msg_funtion();
 
				 }
				});
			
	 }
	 window.onload = last_msg_funtion;
	
	 </script>

views/index.php

  <input id="accumulate" type="text"  value="0" hidden="true">
	<input id="pos" type="text" value="0" hidden="true">
	
	
	  <div id="timeline">
	  	
	  </div>
    
	<div id="loadmore4" class="button_blue" onclick="last_msg_funtion()">+ Load เพิ่ม +</div>


    </div>

css

 .button_blue {
 		    border-top: 1px solid #96d1f8;
 		    background: #65a9d7;
 		    background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
 		    background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
 		    background: -moz-linear-gradient(top, #3e779d, #65a9d7);
 		    background: -ms-linear-gradient(top, #3e779d, #65a9d7);
 		    background: -o-linear-gradient(top, #3e779d, #65a9d7);
 		    padding: 5px 10px;
 		    -webkit-border-radius: 8px;
 		    -moz-border-radius: 8px;
 		    border-radius: 8px;
 		    -webkit-box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
 		    -moz-box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
 		    box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
 		    text-shadow: rgba(0, 0, 0, .4) 0 1px 0;
 		    text-align: center;
 		    cursor: pointer;
 		    color: white;
 		    font-size: 14px;
 		    font-family: Georgia, serif;
 		    text-decoration: none;
 		    vertical-align: middle;
		   
 		}
 	    .button_blue a  {
 			color:#FFF;
 		}
 		.button_blue:hover {
 		    border-top-color: #28597a;
 		    background: #28597a;
 		    color: #ccc;
 		}

 		.button_blue:active {
 		    border-top-color: #1b435e;
 		    background: #1b435e;
 		}
 		      /* top-nav */
		     
		      
 		      .navbar-default .navbar-nav>li>a:hover{
 		        color: #f00;
 		        box-shadow: 0px 20px 0px -18px #FF0000;
 		      }
		     
 		.add{
 		        color: #f00;
 		        box-shadow: 0px 20px 0px -18px #FF0000;
 		      }

frontend/controllers/infoController.php

 	public function actionGet_inform_timeline(){
		Yii::$app->response->format = \yii\web\Response::FORMAT_JSON;
		$pos = $_REQUEST['pos'];
		$data= $_REQUEST['data'];
		$width = $_REQUEST['w'];
		clearstatcache();
		//$content = Content::findOne(2);
		$contents = Content::find()->where(["blog_status"=>1])->offset($pos)->orderBy('created_date DESC')->limit($data)->all();
		
		$timeline_data=[];
		/*for($i=$pos;$i<count($contents);++$i){*/
		foreach($contents as $content){
			//$content=$contents[$i];
			if($content->cover_path==null){
				$image =null;
				$inform=$content->content;
			}else{
				$image =Yii::getAlias("@ImagePath/uploads/content/").$content->cover_path;
				$inform=$content->blog_detail;
				
			}
			if($content->readmore==''){
				$readmore = null;
			}
			else{
				$readmore =Yii::getAlias('@frontend_url/content/view?id=').$content->id;
			}
$detail =["type"=>"blog_post","date"=>$content->created_date,"title"=>$content->title,"width"=>$width,"image"=>$image,"content"=>$inform,'readmore'=>$readmore];
		array_push($timeline_data,$detail);

		}
		return array("pos"=>$pos+count($contents),"data"=>$timeline_data);
		
	    
		
	}