原生js写的九宫格随机位置的照片墙

最新推荐文章于 2022-07-18 21:04:30 发布

Absolon_

最新推荐文章于 2022-07-18 21:04:30 发布

阅读量1.5k

点赞数 2

分类专栏：原生js操作原生js 文章标签：原生js js写九宫格 js写的九宫格随机图片代码

本文链接：https://blog.csdn.net/Absolon_/article/details/87723003

版权

原生js操作同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

原生js

3 篇文章 0 订阅

订阅专栏

九宫格随机位置的照片墙
1、需要用一个数组来记录九宫格的位置
2、需要一个数组，用来记录一下随机出现li的下标
3、写一个随机函数。
首先css代码，布局一个九宫格

 body,
        div,
        h2,
        ul,
        li {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 644px;
            margin: 0 auto;
            background: #eee;
            border: 1px solid #b8b8b8;
            overflow: hidden;
        }

        .title a {
            float: right;
            color: black;
            outline: none;
        }

        .title a:hover {
            color: red;
        }

        #box {
            position: relative;
        }

        .box li {
            float: left;
            width: 200px;
            height: 200px;
            padding: 6px;
            background: #fff;
            border: 1px solid #c3c3c3;
            display: inline;
            list-style: none;
            transition: 1s all;
        }

        .box li img {
            width: 100%;
            height: 100%;
        }

        a {
            position: absolute;
            left: 30px;
            top: 30px;
        }

html的布局，

<div class="box">
        <ul id='box'>
            <li><img src="./img/0.jpg"></li>
            <li><img src="./img/1.jpg"></li>
            <li><img src="./img/2.jpg"></li>
            <li><img src="./img/3.jpg"></li>
            <li><img src="./img/4.jpg"></li>
            <li><img src="./img/5.jpg"></li>
            <li><img src="./img/7.jpg"></li>
            <li><img src="./img/8.jpg"></li>
            <li><img src="./img/9.jpg"></li>
        </ul>
    </div>
    <a href="javascript:;">随机</a>

js代码

  window.onload = function () {
            var oBox = document.getElementById('box');
            var oCBox = document.getElementsByClassName('box')[0];
            var oHeight = oCBox.offsetHeight;
            oCBox.style.height = oHeight + 'px'
            var oChild = oBox.children;
            // li的 left top 的位置的值存进数组 
            var arr = [];
            // 随机下标数组
            var oRan = []
            // 点击事件的开关，防止点击两次位置错乱
            var flog = true;

            // init 初始化一下 改为用定位
            // 先获取一下每个li位置（left，top）存到arr数组里面
            init();
            // 循环每个给每个li 添加上定位，位置
            for (let o = 0; o < arr.length; o++) {
                oChild[o].style.position = 'absolute';
                oChild[o].style.left = arr[o].l + 'px';
                oChild[o].style.top = arr[o].t + 'px';
            }
            // 点击事件
            var oA = document.getElementsByTagName('a')[0];
            oA.onclick = function () {
                // 开关为false的直接停止
                if (!flog) return;
                flog = false;
                
                // 添加oRan 数组下标的随机数；（要随机li下标随机数）
                for (var j = 0; j < arr.length; j++) {
                    let num = ran(0, arr.length);
                    // 去重一下 不能有一样的下标
                    if (oRan.indexOf(num) === -1) {
                        oRan.push(num);
                    } else {
                        j--;
                    }

                }
                //  开始以oRan数组随机下标 来循环li的下标 把每个li添加位置  添加随机位置
                for (let n = 0; n < oRan.length; n++) {
                    let m = oRan[n]
                    oChild[m].style.left = arr[n].l + 'px';
                    oChild[m].style.top = arr[n].t + 'px';

                }
                // 添加之后为空
                oRan = [];
                setTimeout(() => {
                    //1 秒之后吧开关改为true；
                    flog = true;
                }, 1000)
            }
            // 随机函数
            function ran(m, n) {
                return parseInt(Math.random() * (m - n) + n);
            }
            function init(){
                    arr = [];
                    for (let i = 0; i < oChild.length; i++) {
                    arr.push({
                        l: oChild[i].offsetLeft,
                        t: oChild[i].offsetTop
                    })
                }
            }
        }

最后全部代码

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>照片墙一多实例演示</title>
    <style type="text/css">
        body,
        div,
        h2,
        ul,
        li {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 644px;
            margin: 0 auto;
            background: #eee;
            border: 1px solid #b8b8b8;
            overflow: hidden;
        }

        .title a {
            float: right;
            color: black;
            outline: none;
        }

        .title a:hover {
            color: red;
        }

        #box {
            position: relative;
        }

        .box li {
            float: left;
            width: 200px;
            height: 200px;
            padding: 6px;
            background: #fff;
            border: 1px solid #c3c3c3;
            display: inline;
            list-style: none;
            transition: 1s all;
        }

        .box li img {
            width: 100%;
            height: 100%;
        }

        a {
            position: absolute;
            left: 30px;
            top: 30px;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            var oBox = document.getElementById('box');
            var oCBox = document.getElementsByClassName('box')[0];
            var oHeight = oCBox.offsetHeight;
            oCBox.style.height = oHeight + 'px'
            var oChild = oBox.children;
            // li的 left top 的位置的值存进数组 
            var arr = [];
            // 随机下标数组
            var oRan = []
            // 点击事件的开关，防止点击两次位置错乱
            var flog = true;

            // init 初始化一下 改为用定位
            // 先获取一下每个li位置（left，top）存到arr数组里面
            init();
            // 循环每个给每个li 添加上定位，位置
            for (let o = 0; o < arr.length; o++) {
                oChild[o].style.position = 'absolute';
                oChild[o].style.left = arr[o].l + 'px';
                oChild[o].style.top = arr[o].t + 'px';
            }
            // 点击事件
            var oA = document.getElementsByTagName('a')[0];
            oA.onclick = function () {
                // 开关为false的直接停止
                if (!flog) return;
                flog = false;
                
                // 添加oRan 数组下标的随机数；（要随机li下标随机数）
                for (var j = 0; j < arr.length; j++) {
                    let num = ran(0, arr.length);
                    // 去重一下 不能有一样的下标
                    if (oRan.indexOf(num) === -1) {
                        oRan.push(num);
                    } else {
                        j--;
                    }

                }
                //  开始以oRan数组随机下标 来循环li的下标 把每个li添加位置  添加随机位置
                for (let n = 0; n < oRan.length; n++) {
                    let m = oRan[n]
                    oChild[m].style.left = arr[n].l + 'px';
                    oChild[m].style.top = arr[n].t + 'px';

                }
                // 添加之后为空
                oRan = [];
                setTimeout(() => {
                    //1 秒之后吧开关改为true；
                    flog = true;
                }, 1000)
            }
            // 随机函数
            function ran(m, n) {
                return parseInt(Math.random() * (m - n) + n);
            }
            function init(){
                    arr = [];
                    for (let i = 0; i < oChild.length; i++) {
                    arr.push({
                        l: oChild[i].offsetLeft,
                        t: oChild[i].offsetTop
                    })
                }
            }
        }
    </script>
</head>

<body>
    <div class="box">
        <ul id='box'>
            <li><img src="./img/0.jpg"></li>
            <li><img src="./img/1.jpg"></li>
            <li><img src="./img/2.jpg"></li>
            <li><img src="./img/3.jpg"></li>
            <li><img src="./img/4.jpg"></li>
            <li><img src="./img/5.jpg"></li>
            <li><img src="./img/7.jpg"></li>
            <li><img src="./img/8.jpg"></li>
            <li><img src="./img/9.jpg"></li>
        </ul>
    </div>
    <a href="javascript:;">随机</a>
</body>

</html>

本文章为个人写，并非转载！！！！！！
欢迎评论！！！

Absolon_

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
原生js写的九宫格随机位置的照片墙

九宫格随机位置的照片墙1、需要用一个数组来记录九宫格的位置2、需要一个数组，用来记录一下随机出现li的下标3、写一个随机函数。首先css代码，布局一个九宫格 body, div, h2, ul, li { margin: 0; padding: 0; } ...
复制链接

扫一扫

专栏目录