js实现点击按钮使图片排序

 效果

     1 、点击按钮 

            如果按钮文字是从大到小 将li标签按照从大到小的顺序排列 文字改成从小到大

            如果按钮文字是从小到大 将li标签按照从小到大的顺序排列 文字变成从大到小

      2 、点击按钮 将li随机排序 

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

        .wrap {
            width: 440px;
            margin: 50px auto;
            text-align: center;
        }

        ul li {
            float: left;
            width: 100px;
            height: 130px;
            margin-right: 10px;
            margin-bottom: 10px;
            font-size: 12px;
        }

        ul li img {
            width: 100px;
            height: 100px;
        }

        ul li p {
            line-height: 30px;
            text-align: center;
            font-size: 12px;
        }

        .wrap button {
            display: inline-block;
            width: 100px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            background-color: red;
            border: none;
            margin-right: 20px;
            margin-bottom: 20px;
            color: #fff;
            font-size: 16px;
        }
    </style>

  <div class="wrap">
        <button>从大到小</button>