源代码思路分析：
【一】如何生成图片网格，我想到两种方法：
（1）把这张大图切成16张小图，然后用img标签的src
（2）只有一张大图，然后每个元素的背景图用css的background-position进行切割定位，这样就需要16个数组[0,0],[-150,0],[-300,0]……….（我采用这种）
【二】图片背景定位数组与布局定位数组
在选择了使用CSS定位切图，就需要生成数据。
需要的css背景 定位数组为：[0,0],[-150,0],[-300,0],[-450,0],
[0,-150],[-150,-150],[-300,-150],[-450,-150],
[0,-300],[-150,-300],[-300,-300],[-450,-300],
[0,-450],[-150,-450],[-300,-450],[-450,-450]
它们当中都用到了[0,-150,-300,-450]其中的值（就是我定义图片高，宽150的倍数值），所以就利用这个值通过for(){}自动生成数组
//this.nCol在这里是4 — 因为我的拼图是4*4
// this.nArea是150，是每张图片的宽，高（600px/4）–大图是600*600
var l = [],
p = [];
for(var n=0;n<this.nCol;n++){
l.push(n*(this.nArea+1)); //生成[0,151,302,453] 网格的布局定位数组，因为我的效果需要边框（图中的绿色边框），所以与css背景定位数组就不一样了
p.push(-n*this.nArea); // 生成了[0,-150,-300,-450]就是上面说的，CSS背景定位值
}
for(var i=0;i<this.nLen;i++){ // this.nLen 是为 16
var t = parseInt(i/this.nCol),
k = i – this.nCol*t,
aP = [],
aL = [];
aP.push(p[k],p[t],i); //这里我给css背景定位数组额外加了i，是为第3步判断用的，不需要拿来设置css属性的，我把它设置为标签的属性里[bg-i] aL.push(l[k],l[t]);
