代码如下：（需要 引入 jquery .js和 vue.js）：
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><style>*{margin: 0;padding: 0;}/*#piclist { width: 600px; height: 600px; background-color: green; }*/.nitem{/*width: 200px;*/ /*height: 200px;*/float:left;background:url(imgs/fengnv.jpg) 0px0px no-repeat;-webkit-background-size: 600px600px;background-size: 600px600px;font-size: 33px;color:red;font-weight:bold;cursor:pointer;}/*.nitem:nth-child(2){ background-position: -200px 0; } .nitem:nth-child(3){ background-position: -400px 0; } .nitem:nth-child(4){ background-position: 0px -200px; } .nitem:nth-child(5){ background-position: -200px -200px; } .nitem:nth-child(6){ background-position: -400px -200px; } .nitem:nth-child(7){ background-position: 0px -400px; } .nitem:nth-child(8){ background-position: -200px -400px; } .nitem:nth-child(9){ background-position: -400px -400px; }*/.fn-clear{clear:both;height: 0;line-height: 0px;font-size: 0px;}</style></head><body><divid="appbox":style="{ width:width+'px',height:height+'px' }"><divid="piclist"><divclass="nitem"v-for="(item,index) in itemlist":class="{remove : index === 0}":index="index "v-bind:style="{'backgroundPosition':-px(index)+'px -' + py(index) + 'px',width : width / rows + 'px',height : height / cols + 'px'}">{{index}}</div></div></div></body><scriptsrc=js/jquery.min.js></script><scriptsrc=js/vue.min.js></script><script>varolen= 0,oi= 0,cindex= 0,oa=newArray(),oindex= 0,listarray=newArray();varvm=newVue({el:"#appbox",data: {itemlist: [],rows: 3,cols: 3,width: 600,height: 600,},methods: {px(index){return(index %this.rows) * (this.width /this.rows)},py (index){returnparseInt((index /this.cols)) * (this.height/this.cols);}}});for(vari= 0;i<vm.rows*vm.cols;i++) {vm.itemlist.push(i);}functiongetrow(index) {returnparseInt(index /vm.cols);}functiongetcols(index) {returnindex %vm.rows;}functiongetBound(index) {varleft = index - 1;varright = index + 1;vartop = index -vm.rows;varbottom = index +vm.rows;varlen =vm.itemlist.length;//总长度varcurrentRow = getrow(index);varcurrentCol = getcols(index);varroundArr =newArray();if(left >= 0 && left < len && getrow(left) == currentRow) {roundArr.push(left);}if(right >= 0 && right < len && getrow(right) == currentRow) {roundArr.push(right);}if(top >= 0 && top < len && getcols(top) == currentCol) {roundArr.push(top);}if(bottom >= 0 && bottom < len && getcols(bottom) == currentCol) {roundArr.push(bottom);}returnroundArr;}functionbox_switch(i, j) {variobj =$('#piclist .nitem').eq(i);varjobj =$('#piclist .nitem').eq(j);vartobj = iobj.clone();jobj.after(tobj);iobj.replaceWith(jobj);}vm.$nextTick(function() {$('.remove').css({background:'none',backgroundColor:'green'});});functionbox_rand(times) {for(vari = 0; i < times; i++) {oindex=$('.remove').index();oa= getBound(oindex);olen=oa.length;oi=Math.floor(Math.random() *olen);cindex=oa[oi];box_switch(cindex,oindex);}listarray.length= 0;$.each($('.nitem'),function(i, item) {listarray.push($(item).attr('index'));});if(listarray.join(',') ==vm.itemlist.join(',')) {box_rand(times);}}$(function() {//打乱图片box_rand(20);$('.nitem').on('click ',function() {varcindex =$(this).index();varoindex =$('.remove').index();varoRound = getBound(oindex);//空盒子四周的索引if($.inArray(cindex, oRound) < 0) {//不在return false;}else{box_switch(oindex, cindex);varlistArray =newArray();$.each($('.nitem'),function(i, item) {listArray.push($(item).attr('index'));})if(listArray.join(',') ==vm.itemlist.join(',')) {alert('success')}else{console.log('失败')}}});})</script></html>
