<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 urlPrefix = 'https://www.w3cplus.com/sites/default/files/blogs/2016/1603/';
    var pukePic = [];
        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;
    var pacleholde = document.getElementById('reset');
    
    function random(min, max) {
        if (max == null) {
            max = min;
            min = 0;
        }
        return min + Math.floor(Math.random() * (max - min + 1));
    };

    function shuffle(arr) {
        var length = arr.length,
            shuffled = Array(length);
        for (var index = 0, rand; index < length; index++) {
            rand = random(0, index);
            if (rand !== index) shuffled[index] = shuffled[rand];
            shuffled[rand] = arr[index];
        }
        return shuffled;
    }
    shuffle(pukePic);

    function resetPic() {
        var pukeWrap = document.getElementById('puke');
        var newPukePic = shuffle(pukePic);
        pukeWrap.innerHTML = '';
        for (var i = 0; i < index; i++) {
            (function(i) {
                var eleLi = document.createElement("li");
                var item = newPukePic[i];
                console.log(item);
                eleLi.setAttribute('style', 'background:url(' + item + ')');
                pukeWrap.appendChild(eleLi);
            })(i);
        }
    }

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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.