qq空间时光轴效果

效果图:
以后再补充吧 还是不能上传图片
效果上实现了无线滚动
效果图

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:5px;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>