这有什么问题？？？

<!doctype html>
<html>
<head>
   <meta charset="UTF-8">
   <meta name='viewport'content='width=device-width,initial-scale=1.0'>
   <title>Document</title>
   <script src='https://cdnjs.cloudflare.com/ajax/libs/zepto/1.1.6/zepto.min.js'></script>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css">
   <style>
       body,button,dd,dl,dt,fieldest,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul,img{padding:0;margin:0;}
       ul{list-style:none;}
       li{overflow:hidden;float:left;}
       .large{width:100%;height:100%;background: #000;position:absolute;left:0;top:0;display:none;}

   </style>
</head>

<body>
   <ul id="container">
   </ul>
   <div id='large_container'>
       <img id='large_img' src="" alt="">
   </div>
</body>
</html>

<script>
   var totale=17;
   var zWin=$(window);

   var render=function(){
       var padding=2;
       var winWidth=zWin.width();
       var picWidth=Math.floor(winWidth-padding*3)/4
       var tmpl='';
       for(var i=1;i<=totale;i++){
           var p=padding;
           var imgSrc='webimg/'+i+'.jpg';
           if(i%4==1){
               p=0;
           }
           /*tmpl+='<li style="width:'+picWidth+'px;height:'+picWidth+'px;padding-left:'+p+'px;padding-top:'+padding+'px"><img src="'+imgSrc+'" alt=""></li>';*/
           tmpl+='<li data-id="'+i+'" class="animated bounceIn" style="width:'+picWidth+'px;height:'+picWidth+'px;padding-left:'+p+'px;padding-top:'+padding+'px"><canvas id="cvs_'+i+'"></canvas></li>';
           var imageObj=new Image();
           imageObj.index=i;
           imageObj.onload=function(){
               var cvs=$("#cvs_"+this.index)[0].getContext("2d");
               cvs.width=this.width;
               cvs.height=this.height;
               cvs.drawImage(this,0,0)
           }
           imageObj.src=imgSrc;

       }
       $("#container").html(tmpl);
   }
   render();

   var wImage=$('#large_img');
   var loadImg=function(id){
       $('#container').css({height:zWin.height(),'overflow':'hidden'})
       $('#large_container').css({width:zWin.width(),height:zWin.height()}).show();
       var imgsrc='webimg/'+id+'.large.jpg';
       var imageObj=new Image();
       imageObj.onload=function(){
           var w=this.width;
           var h=this.height;
           var winWidth=zWin.width();
           var winHeight=zWin.height();
           var realw=winHeight*w/h;
           var realH=winWidth*h/w;
           var paddingLeft=parseInt((windWidth-realw)/2);
           var paddingTop=parseInt((winHeight-realH)/2);
           if(h/w>1.2){
               wImage.attr('src',imgsrc).css('height',winHeight).css('padding-left',paddingLeft)
           }else{
               wImage.attr('src',imgsrc).css('width',winWidth).css('padding-top',paddingTop);
           }
       }
       imageObj.src=imgsrc;
   }

   $('#container').delegate('li','tap',function(){
       var _id=$(this).attr('data-id');
       alert(1);
       loadImg(_id);
   })

</script>