效果圖:
以後再補充吧 還是不能上傳圖片
效果上實現了無線滾動
效果圖

1：css部分
<style type="text/css">
     *{margin:0;padding:0;}
     /*要讓背景圖平鋪*/
     body{font-size:12px;font-family:"微軟雅黑";background:url("306682.jpg")top center;}
     .timeline{width:1100px;margin:0 auto;position:relative;}
     .timeline .t_line{width:5
 
px;height:1500px;background:#ccc;position:absolute;left:200px;top:50px;}
     .timeline .t_all{width:1100px;position:absolute;}
     /*讓整體往右移動 偏移到時光軸的線上*/
     .timeline .t_all .list{margin:70px 0 0 167px;float:left;}
     .timeline .t_all .list .icon{width:66px;height:66px;float:left;}
     /*讓頭像變圓角*/
     .timeline
 
 .t_all .list .icon img{border-radius:50%;}
     /*.timeline .t_all .list .sj{width:13px;height:16px;background:url("5.jpg") no-repeat;}*/
     .timeline .t_all .list .msg{width:500px;background:#fff;float:left;margin-left:20px;border-radius:5px;font-size:14px;padding:16px;}
  </style>

2:html部分

    <div
 
 class="timeline">
        <!-- 軸線 -->
        <div class="t_line"></div>
        <!-- 內容 -->
        <div class="t_all">

            <!-- list start -->
            <div class="list animated shake">
                <div class="icon">
                    <img src="8.jpg" width="66" height="66" border="0" alt="基努裡維斯" border="0">
                </div>
                <!-- <div class="sj"></div>-->
                <div class="msg"> 
                    尼歐，你終於來了!我一直在等你!
                </div>
            </div>
            <!-- list end -->


            <!-- list start -->
            <div class="list animated shake">
                <div class="icon">
                    <img src="6.jpg" width="66" height="66" border="0" alt="基努裡維斯" border="0">
                </div>
                <!-- <div class="sj"></div>-->
                <div class="msg">
                    為什麼我會來到這裡?這一切究竟是為了什麼?
                </div>
            </div>
            <!-- list end -->


            <!-- list start -->
            <div class="list animated shake">
                <div class="icon">
                    <img src="8.jpg" width="66" height="66" border="0" alt="基努裡維斯" border="0">
                </div>
                <!-- <div class="sj"></div>-->
                <div class="msg">
                    我知道你的意思。讓我來告訴你，你為什麼會來這裡。你來這裡是因為你領悟了某種東西。某種你無法解釋的東西。但是你能感覺到它。這種感覺伴隨著你的整個人生。這個世界一定有什麼地方不對勁，儘管你說不上來，但它一定存在，這種感覺就像心頭的一根刺，讓你寢食難安。就是這種感覺，把你帶到了我這裡來。你知道我在說什麼嗎？
                </div>
            </div>
            <!-- list end -->


            <!-- list start -->
            <div class="list animated shake">
                <div class="icon">
                    <img src="6.jpg" width="66" height="66" border="0" alt="基努裡維斯" border="0">
                </div>
                <!-- <div class="sj"></div>-->
                <div class="msg">
                    我不知道自己究竟是在做夢還是醒著!墨菲斯給了我兩粒藥丸,我吞下了藍色藥丸,然後見到了真實世界,一個在martix之外的世界！
                    <img src="9.jpg" width="400" height="242" border="0" alt="">
                </div>
            </div>
            <!-- list end -->

                <!-- list start -->
            <div class="list animated shake">
                <div class="icon">
                    <img src="8.jpg" width="66" height="66" border="0" alt="基努裡維斯" border="0">
                </div>
                <!-- <div class="sj"></div>-->
                <div class="msg">
                    真相就是，你是個奴隸，Neo。跟別人一樣，你一生下來，就被囚禁在一個沒有知覺的牢籠。
                    你想知道它究竟是什麼嗎？母體無處不在。它就在我們周圍，即使是在這個小小的房間裡。當你望向窗外，或者開啟電視，你就能看到它。你上班的時候能感覺到它，你去教堂的時候能感覺到它，你納稅時也一樣。它就是那個矇蔽你雙眼，讓你無法看到真相的世界。
                </div>
            </div>
            <!-- list end -->
        </div>
    </div>

3:js部分
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script type="text/javascript">
        //滾動條的高度
        var scrollHeight = 0;
        //滾動條距離頂部的高度
        var scrollTop = 0;  
        var html = "";
        var flag = false;
        $(function(){
            var height = $(window).height();
            $(window).scroll(function(){
                scrollHeight = document.body.scrollHeight;
                scrollTop = document.body.scrollTop;
                if(scrollTop + height >= scrollHeight){
                    if(!flag){
                        html = $(".t_all").html();
                    }
                    $(".t_all").append(html);
                    //時光軸的高度初始化
                    $(".t_line").height(document.body.scrollHeight);
                    flag = true;
                }
            });
        })
    </script>