无缝滚动的小应用

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

想到了使用以前做过的图片无缝滚动，原理就是在需要的图片列表中增加一个额外的第一张图片，比方说你要展示的图片是 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();       }   }())