效果图：

HTML结构:

<div id="box">
        <input type="button" value="从大到小" />
        <input type="button" value="打乱顺序" />
        <ul>
            <li>
                <img src="img/1.jpg" alt="">
                <p>1 - 言叶之庭01</p>
            </li>
            <li>
                <img src="" alt="">
                <p></p>
            </li>
            <li>
                <img src="" alt="">
                <p></p>
            </li>
            <li>
                <img src="" alt="">
                <p></p>
            </li>
            <li>
                <img src="" alt="">
                <p></p>
            </li>
            <li>
                <img src="" alt="">
                <p></p>
            </li>
            <li>
                <img src="" alt="">
                <p></p>
            </li>
            <li>
                <img src="" alt="">
                <p></p>
            </li>
        </ul>
    </div>

CSS样式：

				ul,
        li,
        p {
            padding: 0;
            margin: 0;
        }
        ul,
        li {
            list-style: none;
        }
        #box {
            width: 1000px;
            height: 600px;
            border: 1px solid #000;
            margin: 50px auto;
            text-align: center;
            position: relative;
        }
        input {
            margin-top: 30px;
            width: 100px;
            height: 30px;
            line-height: 30px;
            border: 1px solid #ccc;
            background: #009999;
            color: #fff;
            outline: none;
        }
        ul {
            width: 1000px;
            height: 500px;
            top: 100px;
            position: absolute;
            background: #fff;
        }
        ul li {
            width: 240px;
            height: 250px;
            float: left;
            padding: 0 5px 10px 5px;
        }
        ul li img {
            width: 240px;
            height: 200px;
            vertical-align: top;
        }
        p {
            background: #ccc;
            height: 30px;
            line-height: 30px;
            color: #006598;
            font-weight: bold;
        }

JavaScript:

var aLi = document.getElementsByTagName('li');
var aInp = document.getElementsByTagName('input');
var json = {
  'Url': ['img/1.jpg', 'img/2.jpg', 'img/3.jpg', 'img/4.jpg', 'img/5.jpg', 'img/6.jpg', 'img/7.jpg', 'img/8.jpg'],
  'title': ['1 - 言叶之庭01', '2 - 言叶之庭02', '3 - 言叶之庭03', '4 - 言叶之庭04', '5 - 言叶之庭05', '6 - 言叶之庭06', '7 - 言叶之庭07', '8 - 言叶之庭08']
};
var num = [0, 1, 2, 3, 4, 5, 6, 7];
var oImg = document.getElementsByTagName("img");
var oP = document.getElementsByTagName("p");
//初始化
tab();
//函数封装
function tab() {
  for (var i = 0; i < aLi.length; i++) {
    oImg[i].src = json.Url[num[i]];
    oP[i].innerHTML = json.title[num[i]]
  }
}
//大小切换
aInp[0].onoff = true; //定义一个属性值
aInp[0].onclick = function () {
  if (this.onoff) {
    num.sort(function (a, b) {
      return b - a;
    })
    tab();
    this.value = "从小到大";
    aInp[0].onoff = false;
  } else {
    num.sort(function (a, b) {
      return a - b;
    })
    tab();
    this.value = "从大到小";
    aInp[0].onoff = true;
  }
}
//乱序
aInp[1].onclick = function () {
  num.sort(function (a, b) {
    return Math.random() - 0.5;
  })
  tab();
}