<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 arr = [];
			var tarr = [];
      var prefixUrl = "https://www.w3cplus.com/sites/default/files/blogs/2016/1603/";
			var pukePic = [];
			pukePic[0] = prefixUrl +  'puke-a.png';
			pukePic[1] = prefixUrl +  'puke-2.png';
			pukePic[2] = prefixUrl +  'puke-3.png';
			pukePic[3] = prefixUrl +  'puke-4.png';
			pukePic[4] = prefixUrl +  'puke-5.png';
			pukePic[5] = prefixUrl +  'puke-6.png';
			pukePic[6] = prefixUrl +  'puke-7.png';
			pukePic[7] = prefixUrl +  'puke-8.png';
			pukePic[8] = prefixUrl +  'puke-9.png';
			pukePic[9] = prefixUrl +  'puke-10.png';
			pukePic[10] = prefixUrl +  'puke-j.png';
			pukePic[11] = prefixUrl +  'puke-q.png';
			pukePic[12] = prefixUrl +  'puke-k.png';
			pukePic[13] = prefixUrl +  'puke-king.png';
			var index = 14;
			var pacleholde = document.getElementById('reset');

			function randomSort(a, b) {
            return Math.random() > .5 ? -1 : 1;
        }
        function resetPic() {
            pukePic.sort(randomSort);
            var pukeWrap = document.getElementById('puke');
            
            pukeWrap.innerHTML = '';
            for (var i = 0; i < index; i++) {
            	(function (i){
	            	var eleLi = document.createElement("li");
	            	var item = pukePic[i];
	                eleLi.setAttribute('style', 'background:url(' + item + ')');
	                pukeWrap.appendChild(eleLi);
                })(i);
            }
        }

        pacleholde.addEventListener('click', function() {
            pukePic.sort(randomSort);
            resetPic();
        });
        resetPic();
  })();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.