html代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link type="text/css" rel="stylesheet" href="相框拼图布局外部样式.css"> </head> <body> <input type="button" class="button" value="布局1"> <input type="button" class="button" value="布局2"> <input type="button" class="button" value="布局3"> <input type="button" class="button" value="布局4"> <input type="button" class="button" value="布局5"> <input type="button" class="button" value="布局6"> <script type="text/javascript" src="相框拼图布局外部js.js"></script> <script type="text/javascript"> window.onload=function(){ var Btn=document.getElementsByClassName("button"); for(var i=0;i<6;i++){ Btn[i].onclick=function(ev){ return function() { alert(ev); layout("400px", "400px",ev + 1, "imgs/Lighthouse.jpg", "imgs/Desert.jpg", "imgs/Penguins.jpg", "imgs/Tulips.jpg", "imgs/Jellyfish.jpg", "imgs/Hydrangeas.jpg"); } }(i); } //layout函数的参数 //layout(width,height,picnumber,url1,url2,url3,url4......) //输入全部的url,然后写明数量来表明要显示几张图片 } </script> </body> </html>
css:代码
.album{ border: 1px solid black; margin: 0 auto; position: relative; } .img1{ position: absolute; width: 100%; height: 100%; } .al2_img1,.al2_img2, .al3_img1,.al3_img2,.al3_img3, .al4_img1,.al4_img2,.al4_img3,.al4_img4, .al5_img1,.al5_img2,.al5_img3,.al5_img4,.al5_img5, .al6_img1,.al6_img2,.al6_img3,.al6_img4,.al6_img5,.al6_img6 { width: 100%; height: 100%; position: absolute; } .al2_img1{ -moz-clip-path:polygon(0 0, 67% 0, 33% 100%, 0% 100%); ; -ms-clip-path:polygon(0 0, 67% 0, 33% 100%, 0% 100%); ; -webkit-clip-path: polygon(0 0, 67% 0, 33% 100%, 0% 100%); clip-path: polygon(0 0, 67% 0, 33% 100%, 0% 100%); } .al2_img2{ -moz-clip-path:polygon(67% 0, 100% 0, 100% 100%, 33% 100%) ; -ms-clip-path:polygon(67% 0, 100% 0, 100% 100%, 33% 100%) ; -webkit-clip-path: polygon(67% 0, 100% 0, 100% 100%, 33% 100%); clip-path: polygon(67% 0, 100% 0, 100% 100%, 33% 100%); } .al3_img2{ top:0; right: 0; } .al3_img3{ bottom: 0; right: 0; } .al4_img1{ top: 0; left: 0; } .al4_img2{ top: 0; right: 0; } .al4_img3{ bottom: 0; right: 0; } .al4_img4{ bottom: 0; left: 0; } .al5_img1{ top: 0; left: 0; } .al5_img2{ top: 0; right: 0; } .al5_img3{ bottom:0; right: 0; } .al5_img4{ bottom: 0; } .al5_img5{ bottom: 0; left: 0; } .al6_img1{ top: 0; left: 0; } .al6_img2{ top: 0; right: 0; } .al6_img3{ right: 0; } .al6_img4{ right: 0; bottom: 0; } .al6_img5{ bottom: 0; } .al6_img6{ bottom: 0; left: 0; }
javascript:
function layout(width,height,picnumber,url1,url2,url3,url4,url5,url6){ var Obody=document.getElementsByTagName("body")[0]; var Odiv=document.createElement("div"); Odiv.className="album"; Odiv.style.width=width; Odiv.style.height=height; Obody.appendChild(Odiv); function getStyle(element,attr){ if(getComputedStyle){ var style=document.defaultView.getComputedStyle(element,null); var comstyle=style[attr]; } else{ var style=element.currentStyle; comstyle=style[attr]; } return parseInt(comstyle); } if(picnumber==1) { for (var i = 0; i < picnumber; i++) { var img = document.createElement("img"); img.className = "img1"; img.setAttribute("src", url1); Odiv.appendChild(img); } } if(picnumber==2){ for (var i = 0; i < picnumber; i++) { img = document.createElement("img"); img.setAttribute("id","img"+i); if(i==0){ img.setAttribute("src", url1); img.className="al2_img1"; } if(i==1){ img.setAttribute("src", url2); img.className="al2_img2"; } Odiv.appendChild(img); } } if(picnumber==3){ for(var i=0;i<picnumber;i++){ img=document.createElement("img"); if(i==0){ img.setAttribute("src", url1); img.className="al3_img1"; img.style.height=getStyle(Odiv,"height")+"px"; img.style.width=getStyle(Odiv,"width")-(getStyle(Odiv,"height")/2)+"px"; } if(i==1){ img.setAttribute("src",url2); img.className="al3_img2"; img.style.width=getStyle(Odiv,"height")/2+"px"; img.style.height=getStyle(Odiv,"height")/2+"px"; } if(i==2){ img.setAttribute("src",url3); img.className="al3_img3"; img.style.width=getStyle(Odiv,"height")/2+"px"; img.style.height=getStyle(Odiv,"height")/2+"px"; } Odiv.appendChild(img); } } if(picnumber==4) { for (var i = 0; i < picnumber; i++) { img = document.createElement("img"); if (i == 0) { img.setAttribute("src", url1); img.className = "al4_img1"; img.style.width = getStyle(Odiv, "width") / 2 + "px"; img.style.height = getStyle(Odiv, "height") / 2 + "px"; } if (i == 1) { img.setAttribute("src", url2); img.className = "al4_img2"; img.style.width = getStyle(Odiv, "width") / 2 + "px"; img.style.height = getStyle(Odiv, "height") / 2 + "px"; } if (i == 2) { img.setAttribute("src", url3); img.className = "al4_img3"; img.style.width = getStyle(Odiv, "width") / 2 + "px"; img.style.height = getStyle(Odiv, "height") / 2 + "px"; } if (i == 3) { img.setAttribute("src", url4); img.className = "al4_img4"; img.style.width = getStyle(Odiv, "width") / 2 + "px"; img.style.height = getStyle(Odiv, "height") / 2 + "px"; } Odiv.appendChild(img); } } if(picnumber==5) { for (var i = 0; i < picnumber; i++) { img = document.createElement("img"); if (i == 0) { img.setAttribute("src", url1); img.className = "al5_img1"; img.style.width = 2 * getStyle(Odiv, "width") / 3 + "px"; img.style.height = 2 * getStyle(Odiv, "height") / 3 + "px"; } if (i == 1) { img.setAttribute("src", url2); img.className = "al5_img2"; img.style.width = getStyle(Odiv, "width") / 3 + "px"; img.style.height = getStyle(Odiv, "width") / 3 + "px"; } if (i == 2) { img.setAttribute("src", url3); img.className = "al5_img3"; img.style.width = getStyle(Odiv, "width") / 3 + "px"; img.style.height = getStyle(Odiv, "height") - (getStyle(Odiv, "width") / 3) + "px"; } if (i == 3) { img.setAttribute("src", url4); img.className = "al5_img4"; img.style.width = getStyle(Odiv, "width") / 3 + "px"; img.style.height = getStyle(Odiv, "height") / 3 + "px"; img.style.left = getStyle(Odiv, "width") / 3 + "px"; } if (i == 4) { img.setAttribute("src", url5); img.className = "al5_img5"; img.style.width = getStyle(Odiv, "width") / 3 + "px"; img.style.height = getStyle(Odiv, "height") / 3 + "px"; } Odiv.appendChild(img); } } if(picnumber==6){ for(var i=0;i<picnumber;i++){ img=document.createElement("img"); if(i==0){ img.setAttribute("src",url1); img.className="al6_img1"; img.style.width=2*getStyle(Odiv,"width")/3+"px"; img.style.height=2*getStyle(Odiv,"height")/3+"px"; } if(i==1){ img.setAttribute("src",url2); img.className="al6_img2"; img.style.width=getStyle(Odiv,"width")/3+"px"; img.style.height=getStyle(Odiv,"height")/3+"px"; } if(i==2){ img.setAttribute("src",url3); img.className="al6_img3"; img.style.width=getStyle(Odiv,"width")/3+"px"; img.style.height=getStyle(Odiv,"height")/3+"px"; img.style.top=getStyle(Odiv,"height")/3+"px"; } if(i==3){ img.setAttribute("src",url4); img.className="al6_img4"; img.style.width=getStyle(Odiv,"width")/3+"px"; img.style.height=getStyle(Odiv,"height")/3+"px"; } if(i==4){ img.setAttribute("src",url5); img.className="al6_img5"; img.style.width=getStyle(Odiv,"width")/3+"px"; img.style.height=getStyle(Odiv,"height")/3+"px"; img.style.left=getStyle(Odiv,"width")/3+"px"; } if(i==5){ img.setAttribute("src",url6); img.className="al6_img6"; img.style.width=getStyle(Odiv,"width")/3+"px"; img.style.height=getStyle(Odiv,"height")/3+"px"; } Odiv.appendChild(img); } } }
笔记：
1，闭包问题在for循环中，
例如一段代码如下：
function createFunction (){ var result=new Array(); for(var i=0;i<10;i++){ result[i]=function(){ return i; } }
return result; }
实际上，每个函数都会返回10，因为当我们执行return i 语句时，在匿名函数内部没有找到变量 i ,在父级函数中查找变量 i ，此时变量 i 经过循环之后变成了10,解决办法：
代码：
function createFunctions(){ var result=new Array(); for(var i=0;i<10;i++){ result[i]=function(num){ return function(){ return num; } }(i); } return result; }
原理如下：
在匿名函数内部，又创建了一个访问num的闭包，每次调用匿名函数时，由于参数num是按值传递的，每次调用num都会返回为i 的当前值
方法二：
利用es6 的let 和const关键字：
例如：
function createFunction (){ var result=new Array(); for(let i=0;i<10;i++){ result[i]=function(){ return i; } } return result; }
2,裁剪图片的clip-path方法：
3，append();在IE下不兼容，要使用appendChild()实现兼容
4，要获取元素的样式，利用getStyle(),获取属性，注意 element.style.height或element.style.width用于设置样式属性，通过style属性来获取的样式，不包含与外部样式表或嵌入样式表经层叠而来的样式