百度前端技术学院之相册拼图布局

首页 > 代码库 > 百度前端技术学院之相册拼图布局

百度前端技术学院之相册拼图布局

2024-09-12 08:28:41 217人阅读

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属性来获取的样式，不包含与外部样式表或嵌入样式表经层叠而来的样式

百度前端技术学院之相册拼图布局

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > 百度前端技术学院之相册拼图布局

百度前端技术学院之相册拼图布局

看完仍有疑问？有类似问题直接问程序猿