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>