数组排序练习

实现元素从大到小排序和随机排序

先确定结构

 <div>
        <button>从大到小</button>
        <button>随机排序</button>
    </div>
    <ul>
        <li><img src="./img/1.jpg" alt=""><span>1</span></li>
        <li><img src="./img/2.jpg" alt=""><span>2</span></li>
        <li><img src="./img/3.jpg" alt=""><span>3</span></li>
        <li><img src="./img/4.jpg" alt=""><span>4</span></li>
        <li><img src="./img/5.jpg" alt=""><span>5</span></li>
        <li><img src="./img/6.jpg" alt=""><span>6</span></li>
        <li><img src="./img/7.jpg" alt=""><span>7</span></li>
        <li><img src="./img/8.jpg" alt=""><span>8</span></li>
    </ul>

然后写样式，做好布局

  <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        div {
            margin-top: 20px;
            margin-bottom: 10px;
            text-align: center;
        }

        ul {
            width: 900px;
            height: 440px;
            padding: 10px 20px 0px 10px;
            background-color: cadetblue;
            margin: 0px auto;
        }

        ul li {
            display: inline-block;
            width: 210px;
            height: 220px;
            margin-left: 10px;
        }

        img {
            width: 100%;
            height: 200px;
            vertical-align: middle;
        }

        span {
            display: block;
            width: 200px;
            text-align: center;
        }
    </style>

实现静态的布局效果

实现点击效果的代码

 <script>
        var arr = [
            { "src": "./img/1.jpg", "title": "1", id: '1' },
            { "src": "./img/2.jpg", "title": "2", id: '2' },
            { "src": "./img/3.jpg", "title": "3", id: '3' },
            { "src": "./img/4.jpg", "title": "4", id: '4' },
            { "src": "./img/5.jpg", "title": "5", id: '5' },
            { "src": "./img/6.jpg", "title": "6", id: '6' },
            { "src": "./img/7.jpg", "title": "7", id: '7' },
            { "src": "./img/8.jpg", "title": "8", id: '8' }
        ];
        var oBtn = document.getElementsByTagName("button");
        var oUl = document.getElementsByTagName("ul")[0];
        var oLi = document.getElementsByTagName("li");

        oBtn[0].onclick = function () {
            oUl.innerHTML = "";
            for (i = 0; i < arr.length; i++) {
                arr.sort(function (a, b) {
                    return b.id - a.id;
                });
                oUl.innerHTML += "<li><img src=" + arr[i].src + "><span>" + arr[i].id + "</span></li>";
            }
        }
        oBtn[1].onclick = function () {
            oUl.innerHTML = "";
            for (i = 0; i < arr.length; i++) {
                arr.sort(function () {
                    return Math.random() - 0.5;
                });
                oUl.innerHTML += "<li><img src=" + arr[i].src + "><span>" + arr[i].id + "</span></li>";
            }
        }


    </script>

点击从大到小按钮，效果如下图

点击随机排序按钮，显示图片效果