<script>

  var total = 17;

  var zWin = $(window);

  var render = function (){

      var tmpl = ""; //防止字符串前出现undefined

      var padding = 2;

      var winWidth = zWin.width();

      var picWidth = Math.floor((winWidth-padding*3)/4);

      for(i=1;i<=total;i++) {

           var p = padding;

            var imgSrc = "img/"+i+".jpg";

           if(i%4==1){

            p = 0;

           }

          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 img = new Image();

          img.index = i;

          img.onload = function(){

          c = $('cvs_'+this.index)[0];

          var cvs=c.getContext("2d");

          cvs.width = this.width;

          cvs.height = this.height;

          cvs.drawImage(this,0,0);

        }

        img.src = imgSrc;

          }

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

    }

    render();

</script>