简单的照片墙制作

最新推荐文章于 2024-03-28 11:02:49 发布

南风知我意f

最新推荐文章于 2024-03-28 11:02:49 发布

阅读量734

点赞数 1

文章标签：照片墙

本文链接：https://blog.csdn.net/qq_45323204/article/details/95365098

版权

首先，创建一个div 标签，为整个相册的框架。

   <body>
        <div id="wrap">        
        </div>  
    </body>

利用css将这个div居中到浏览器

    *{
       margin: 0;
       padding: 0;
    }
    html,body{
        height: 100%;
    }
    #wrap{
        width: 90%;
        height: 90%;
        border: 2px solid #cccccc;
        position: absolute;
        top: 5%;
        left: 5%; 
    }

然后导入照片墙中的照片。
注意这里不是在 div下面直接导入各个照片，
如果直接导入的话，照片数量太多，会十分麻烦。

所以这里运用Jquery 写一个简单的算法，导入图片（24张图）。

	<script>
  	$(function(){
    // 存图片路径
    let imgs=[];
    creatediv();
    init();
    function creatediv(){
        // 生成24个div
        for(let i=1; i<=24 ; i++){
            imgs.push("images/"+i+".jpg");
            /*
            这里需要注意的是，需要将图片的名称改成1.jpg 2.jpg...  
            并放在同一个目录下面的文件夹内。
            */
            // 创建div
            let $div=$("<div></div>");
            // 为div添加背景图 即各个照片按for循环的顺序，一次插入。
            $div.css({
                "background":"url(images/"+i+".jpg)",
                //背景图缩放  
                "background-size":"125px 125px"
            });
            // 将div添加到wrap中
            $("#wrap").append($div); 
        }
    }
    利用css 给每一个div一个尺寸 125*125px
    wrap>div{
        width:125px;
        height: 125px; 
    }

写到这里，会发现，导入进来的照片只有显示在最左侧。
这里用到了 24 张图把24张图均匀的放在整个框架中。

1、先定位，把24张图都放在左上角。

 给每个div一个定位。
 #wrap>div{
     width:125px;
     height: 125px; 
     position: absolute;
     left: 0;
     top: 0;
     box-shadow: 1px 1px 10px #f32fb2;//背景色，阴影等。
     cursor: pointer;// 鼠标移动上去 变成手。
 }

2、然后利用索引，算出每行每列图片的位置。
在这里插入图片描述
行数除以6 商的整数部分为Y坐标，余数为X坐标

 function init(){
     $("#wrap>div").each(function(index,element){
         //计算行索引和列索引
         let x=parseInt(index/6);
         let y = index%6;
         // 计算行间隔和列间隔
         // 列间隔（wrap的宽度-6*小图的宽度）/5
         let yspan=($("#wrap").width()-6*125)/5;
         // 行间隔（wrap的高度-4*小图的高度）/5
         let xspan = ($("#wrap").height()-4*125)/3;
         //计算每个图片距离上边边界和左边边界的距离
         //图片距左的距离： 列的索引*(小图宽度+列间隔)
         //图片距顶的距离： 行的索引*(小图高度+行间隔)
         let _left = y*(yspan+125);
         let _top = x*(xspan+125);
        
         //生成随机数
         let r = Math.random()*60-30;
         $(element).css({
             "top":_top+"px",
             "left":_left+"px",
             "transform":"scale(0.9) rotate("+r+"deg)"
             // 添加一个随机选装角度。
         });
     });
 }

效果图如下在这里插入图片描述

点击任意一张图片，其他23张图全部变为这张图的一部分，并合成一张完整的图。
在这里插入图片描述

在这里插入代码片//给每一个div 一个点击事件

 $("#wrap>div").click(function(){
     let i = $(this).index();
     $("#wrap>div").each(function(index,element){
         //计算行索引和列索引
         let x=parseInt(index/6);
         let y=index%6;
         //计算图片的偏移量
         $(element).css({
             "background":"url("+imgs[i]+")",
 			"background-position":"-"+(y*125)+"px -"+(x*125)+"px",
 			"box-shadow":"0 0 0 0",
 			"transform":"rotate(0deg)"
         });
         // 计算图片距离左和上的距离
         // 计算左空白  (wrap的宽度- 6*小图的宽度)/2；
         // 计算上空白  (wrap的高度- 4*小图的宽度)/2；
         let leftspan = ($("#wrap").width()-6*125)/2;
         let topspan = ($("#wrap").height()-4*125)/2;
         // 图片距离左边的距离 列索引*小图宽度+左空白；
         // 图片距离顶部的距离 行索引*小图高度+上空白；
         let _left = y*125+leftspan;
         let _top  = x*125+topspan;
         setTimeout(function(){
             $(element).css({
                 "top":_top+"px",
                 "left": _left+"px"
             })

         })
     })

 })

最后合成一张图片。在这里插入图片描述
源代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>照片墙</title>
    <style>
        *{
           margin: 0;
           padding: 0;
        }
        html,body{
            height: 100%;
        }
        #wrap{
            width: 90%;
            height: 90%;
            border: 2px solid #cccccc;
            position: absolute;
            top: 5%;
            left: 5%; 
        }
        #wrap>div{
            width:125px;
            height: 125px; 
            position: absolute;
            left: 0;
            top: 0;
            box-shadow: 1px 1px 10px #f32fb2;
            cursor: pointer;
            transition: 1.5s;  
        }
    </style>
</head>
<body>
        <div id="wrap">
           
        </div>
    
</body>
<script src="jquery.min.js"></script>
<script>

    $(function(){
        // console.log("aaaaaaaaaaa");
        // 存图片路径
        let imgs=[];
        creatediv();
        init();
        function creatediv(){
            // 生成24个div
            for(let i=1; i<=24 ; i++){
                imgs.push("images/"+i+".jpg");
                // 创建div
                let $div=$("<div></div>");
                // 为div添加背景图
                $div.css({
                    "background":"url(images/"+i+".jpg)",
                    "background-size":"125px 125px"
                });
                // 将div添加到wrap中
                $("#wrap").append($div); 
            }
        }

        function init(){
            $("#wrap>div").each(function(index,element){
                //计算行索引和列索引
                let x=parseInt(index/6);
                let y = index%6;
                // 计算行间隔和列间隔
                // 列间隔（wrap的宽度-6*小图的宽度）/5
                let yspan=($("#wrap").width()-6*125)/5;
                // 行间隔（wrap的高度-4*小图的高度）/5
                let xspan = ($("#wrap").height()-4*125)/3;
                //计算每个图片距离上边边界和左边边界的距离
                //图片距左的距离： 列的索引*(小图宽度+列间隔)
                //图片距顶的距离： 行的索引*(小图高度+行间隔)
                let _left = y*(yspan+125);
                let _top = x*(xspan+125);
                //生成随机数
                let r = Math.random()*60-30;


                $(element).css({
                    "top":_top+"px",
                    "left":_left+"px",
                    "transform":"scale(0.9) rotate("+r+"deg)"
                });
            });
        }  

        //给每一个div 一个点击事件
        $("#wrap>div").click(function(){
            let i = $(this).index();
            $("#wrap>div").each(function(index,element){
                //计算行索引和列索引
                let x=parseInt(index/6);
                let y=index%6;
                //计算图片的偏移量
                $(element).css({
                    "background":"url("+imgs[i]+")",
					"background-position":"-"+(y*125)+"px -"+(x*125)+"px",
					"box-shadow":"0 0 0 0",
					"transform":"rotate(0deg)"
                });
                // 计算图片距离左和上的距离
                // 计算左空白  (wrap的宽度- 6*小图的宽度)/2；
                // 计算上空白  (wrap的高度- 4*小图的宽度)/2；
                let leftspan = ($("#wrap").width()-6*125)/2;
                let topspan = ($("#wrap").height()-4*125)/2;
                // 图片距离左边的距离 列索引*小图宽度+左空白；
                // 图片距离顶部的距离 行索引*小图高度+上空白；
                let _left = y*125+leftspan;
                let _top  = x*125+topspan;
                setTimeout(function(){
                    $(element).css({
                        "top":_top+"px",
                        "left": _left+"px"
                    })

                })
            })

        })        
    });
    </script>
</html>

南风知我意f

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
简单的照片墙制作

首先，创建一个div 标签，为整个相册的框架。 <body> <div id="wrap"> </div> </body>利用css将这个div居中到浏览器 *{ margin: 0; padding: 0; } html,bod...
复制链接

扫一扫