效果图：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
background-image: url(../img/randomdivbg.png);
background-size: 100% 100%;
}
.imgspace {
margin: auto;
1200px;
height: 500px;
position: relative;
border: 1px solid black;
}
</style>
<body>
<div class="bg">
<div class="imgspace"></div>
</div>
</body>
<script type="text/javascript" src="../js/jquery-1.12.3.min.js"></script>
<script>
var img = ["../worldcup/cup1.png", "../worldcup/cup2.png", "../worldcup/cup3.png",
"../worldcup/cup4.png", "../worldcup/cup5.png", "../worldcup/cup6.png",
"../worldcup/cup7.png", "../worldcup/cup8.png", "../worldcup/cup9.png",
"../worldcup/cup10.png", "../worldcup/cup11.png", "../worldcup/cup12.png",
"../worldcup/cup13.png", "../worldcup/cup14.png", "../worldcup/cup15.png",
"../worldcup/cup16.png"
];
var imgX = {};
for(var i = 0; i < 15; i++) {
var div = $("<div></div>");
var width = parseInt(Math.random() * (250 - 150 + 1) + 150);
var height = parseInt(width * 0.6);
var margin = parseInt(Math.random() * (20 + 20 + 1) - 20);
var rotate = parseInt(Math.random() * 30);
var zindex = parseInt(Math.random() * 3);
var imgindex;
while(true) {
imgindex = parseInt(Math.random() * img.length);
if(!imgX[imgindex]) {
imgX[imgindex] = 1;
break;
}
}
div.css("width", "" + width + "px").
css("height", "" + height + "px").
css("margin", "" + margin + "px").
css("background-color", "#FF0000").
css("display", "inline-block").
css("background-image", "url(" + img[imgindex] + ")").
css("background-size", "100% 100%").
css("border", "5px solid white").
css("transform", "rotate(" + rotate + "deg)").
css("z-index", "" + zindex + "");
div.clone().prependTo($(".imgspace"));
}
</script>
</html>