<script>

? var total = 17;

? var zWin = $(window);

? var render = function (){

? ? ? var tmpl = ""; //防止字符串前出現(xiàn)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>