背景图片时一个雪碧图。图片写在数组中通过循环获取

css
因为引用的是一个图片，只是位置的变化。所有直接在css里面设置背景图
.pic{width:80px;height:80px;display:inline-block;background:url('img/index.png') no-repeat;}

<ul class="app_list_box"></ul>
<script src="js/jquery-3.1.1.min.js"></script>
<script>
    var pic=['<div class="pic" style="background-position:-15px -15px" ></div>',  
         '<div class="pic" style="background-position:-102px -15px"></div>',
         '<div class="pic" style="background-position:-189px -15px"></div>',
         '<div class="pic" style="background-position:-277px -15px"></div>',
         '<div class="pic" style="background-position:-363px -15px"></div>',
         '<div class="pic" style="background-position:-450px -15px"></div>',
         '<div class="pic" style="background-position:-15px -101px"></div>'];
    var html1="";
    for(var i=0;i<pic.length;i++){
   html1 +='<li>'+pic[i]+'</li>';
}

$(".app_list_box").append(html1);

</script>