预览图

这里只展示静态的图片，动态的效果就用代码演示了；

1先要在文档中显示100个小方块

<ul id="father">
        <li style="top: 0px;left: 0px;"></li>
        <li style="top: 0px;left: 100px;"></li>
        <li style="top: 0px;left: 200px;"></li>
        <li style="top: 0px;left: 300px;"></li>
        <li style="top: 0px;left: 400px;"></li>
        <li style="top: 0px;left: 500px;"></li>
        <li style="top: 0px;left: 600px;"></li>
        <li style="top: 0px;left: 700px;"></li>
        <li style="top: 0px;left: 800px;"></li>
        <li style="top: 0px;left: 900px;"></li>
        //后面的可以根据这是个设置
</ul>

这里可以用ul li 写小方块，这样方便，刚开始写样式的时候我用的弹性布局没这样写的时候有一个缺点，
就是点击一个小方块之后其他的小方块也会移动这样不是我们想要的效果，所以我们可以用子绝父相布局。

#father { //样式设置
            width: 1002px;
            height: 502px;
            /* display: flex;
            flex-flow: row wrap; */
            position: relative;
            border: 1px solid red;
            margin: 200px auto;
            background-color: black;
            background-repeat: no-repeat;
            font-size: 40px;
            color: red; 
        }
        #father>li {
            list-style: none;
            width: 100px;
            height: 50px;
            border: 1px solid white;
            background-color: aqua;
            transition: top 5s, left 5s;
            position: absolute;
            font-size: 15px;
            line-height: 50px;
            color: black;
            text-align: center;
        }
   body {//隐藏掉出页面的小方块
            overflow: hidden;
        }

2.js部分

<script>
        //获取li节点点
        var li = document.getElementsByTagName("li");
        var i = 0;
        //用循环调用函数，给每一个li添加点击事件
        for (var i = 1; i <= 100; i++) {
            show(i);
        }
        //定义一个空数组
        var arr = [];
        function show(i) {
            li[i - 1].addEventListener("click", function () {
                //点击时颜色随机
                var r = parseInt(Math.random() * 255);
                var g = parseInt(Math.random() * 255);
                var b = parseInt(Math.random() * 255);
                arr.push(i);
                console.log(arr);
                //移除点击事件，点了之后不能点击同一个
                li[i - 1].removeEventListener("click", arguments.callee);
                //获取鼠标的坐标
                var x = event.clientX;
                var y = event.clientY;
                //砖块掉落时样式
                li[i - 1].style.zIndex = "1000";
                li[i - 1].innerHTML = "(*￣▽￣*)ミ|Ю";
                li[i - 1].style.backgroundColor = "rgb(" + r + "," + g + "," + b + ")";
                //砖块掉落
                li[i - 1].style.top = (x + 1000) + "px";
                li[i - 1].style.left = y + "px";
                console.log(i + "被点击了");
                //没掉落一定砖块会出现图片
                if (arr.length > 20) {
                    father.style.backgroundImage = "url(image/1.jpg)";
                }
                if (arr.length > 40) {
                    father.style.backgroundImage = "url(image/2.jpg)";
                }
                if (arr.length > 60) {
                    father.style.backgroundImage = "url(image/3.jpg)";
                }
                if (arr.length > 80) {
                    father.style.backgroundImage = "url(image/4.jpg)";
                }
                if (arr.length == 100) {
                    father.style.backgroundImage = "url(image/5.jpg)";
                    father.innerHTML = "封茗囧菌";
                } else {
                    //father.style.backgroundColor = "rgb(" + r + "," + g + "," + b + ")";
                }
            });
        }
    </script>

这样基本就完成了我们的案例了。