无缝滚动的小应用

无缝滚动的小应用

项目要实现下面的表格内容自动往下滚动，并且无缝衔接

想到了使用以前做过的图片无缝滚动，原理就是在需要的图片列表中增加一个额外的第一张图片，比方说你要展示的图片是 img1,img2,img3,img4，然后你需要把第一张图片增加到尾部，现在要展示的图片就是img1,img2,img3,img4,img5（img1）,当图片滚完img5的时候，这时候就要立刻把此时滚动的位置换到第一张图片的位置，这样就能达到无缝了。
今天做的也跟上面的类似了，可视区不滚动时最多能显示6个，我开始就在数据的最后面加了6个，但是这里出现了个问题，就是这个容器的高度比6行的高度要多点（这是基于其他同事代码上加的功能），这也很好理解，因为移动端要自适应，一开始就算不了那么准了，最后的效果会有一顿的感觉了，然后就想最后在数据后面再加在一条数据就能解决了，试了下，果然行。

  (function() {
       // 这里是数据
       var userList = ...;
       var length = userList.length;
       function insertUserList(num) {
           var str = "";
           for (var i = 0; i < length+num; i++) {
               var k = i % length;
               str += "<div class='list-line'>";
                   str += "<div>"+userList[k].realname+"</div>";
                   str += "<div>"+userList[k].prize_name+"&nbsp;</div>";
                   str += "<div>"+userList[k].time+"</div>";
               str += "</div>";
           }
           $("#user-list").append(str);
       }

       if (userList.length <= 6) {
           insertUserList(0);
       } else {
           insertUserList(7);
           autoScroll();
       }
       function autoScroll() {
           // 获取可视区的总高度
            var userHeight = $("#user-list").height();
                userListLineHeight = $("#user-list .list-line").height()；

           // 计算可视区多余的位置
           var moreHeight = userHeight - userListLineHeight * 6;
               // 达到了这个位置，就拉到头
               scrollBottomHeight = (length+1) * userListLineHeight - moreHeight,
               bodyList = document.querySelector("#user-list");
           function ani() {
               setTimeout(ani, 32);
               bodyList.scrollTop++;
               if (bodyList.scrollTop >= scrollBottomHeight) {
                   bodyList.scrollTop = userListLineHeight - moreHeight;
               }
           }
           ani();
       }
   }())