<div id="reset">排序</div>
<ul id="puke"></ul>
ul {
	overflow: hidden;
	padding: 10px;
  text-align: center;
  width: 1160px;
  margin: auto;
  li {
		list-style: none outside none;
		float: left;
		margin: 5px;
		width: 153px;
		height: 216px;
		background-position: center;
		background-repeat: no-repeat;
		border: 1px solid #ccc;
		border-radius: 4px;
	}
}
#reset {
	width: 200px;
	padding: 10px;
	font-size: 2em;
	margin: 50px auto 20px;
	cursor: pointer;
	background-color: #0095dd;
	color: #fff;
	border-radius: 5px;
	text-align: center;
}
;(function() {
  var pacleholde = document.getElementById('reset');
        
  function randomSort(arr, newArr) {
	  if(arr.length == 1) {
		  newArr.push(arr[0]);
			return newArr; // 相当于递归退出
		}
		var random = Math.ceil(Math.random() * arr.length) - 1;
		newArr.push(arr[random]);
		arr.splice(random,1);
		randomSort(arr, newArr);
  }

	var newPukePic = [];
		
  function resetPic() {
    var pukePic = [];
    var urlPrefix = 'https://www.w3cplus.com/sites/default/files/blogs/2016/1603/';
    pukePic[0] = urlPrefix + 'puke-a.png';
    pukePic[1] = urlPrefix +  'puke-2.png';
    pukePic[2] = urlPrefix +  'puke-3.png';
    pukePic[3] = urlPrefix +  'puke-4.png';
    pukePic[4] = urlPrefix +  'puke-5.png';
    pukePic[5] = urlPrefix +  'puke-6.png';
    pukePic[6] = urlPrefix +  'puke-7.png';
    pukePic[7] = urlPrefix +  'puke-8.png';
    pukePic[8] = urlPrefix +  'puke-9.png';
    pukePic[9] = urlPrefix +  'puke-10.png';
    pukePic[10] = urlPrefix +  'puke-j.png';
    pukePic[11] = urlPrefix +  'puke-q.png';
    pukePic[12] = urlPrefix +  'puke-k.png';
    pukePic[13] = urlPrefix +  'puke-king.png';
    var index = 14;
    randomSort(pukePic, newPukePic);
    var pukeWrap = document.getElementById('puke');
    pukeWrap.innerHTML = '';
    for (var i = 0; i < index; i++) {
      (function (i){
	      var eleLi = document.createElement("li");
	      var item = newPukePic[i];
	      eleLi.setAttribute('style', 'background:url(' + item + ')');
	      pukeWrap.appendChild(eleLi);
       })(i);
      }
     }

  pacleholde.addEventListener('click', function() {
    newPukePic = [];
    resetPic();
   });
   resetPic();
})();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.