console
function rd(n,m){
var c = m-n+1;
return Math.floor(Math.random() * c + n);
}
$('button').click(function() {
reload()
})
reload()
function reload() {
var w = parseInt($('section').width()),
h = parseInt($('section').height());
$('div').each(function() {
var wh = rd(150, 200)
$(this).css({
width: wh,
height: wh
})
})
var d0 = parseInt($('#d0').width()),
d1 = parseInt($('#d1').width()),
d2 = parseInt($('#d2').width()),
d3 = parseInt($('#d3').width());
var a1 = rd(-(d0 / 4), w / 2 - d0),
a2 = rd(0, h / 2 - d0 / 4 * 3);
var b1 = rd(-(d1 / 4), w / 2 - d1),
b2 = rd(-(d1 / 4), h / 2 - d1);
var c1 = rd(0, w / 2 - d2 / 4 * 3),
c2 = rd(-(d2 / 4), h / 2 - d2);
var e1 = rd(0, w / 2 - d3 / 4 * 3),
e2 = rd(0, h / 2 - d3 / 4 * 3);
$('#d0').css('margin-left', a1 +'px')
$('#d0').css('margin-top', a2 +'px')
$('#d1').css('margin-left', b1 +'px')
$('#d1').css('margin-top', b2 +'px')
$('#d2').css('margin-left', c1 +'px')
$('#d2').css('margin-top', c2 +'px')
$('#d3').css('margin-left', e1 +'px')
$('#d3').css('margin-top', e2 +'px')
}
<button>reload</button>
<section>
<div id="d0"></div>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
</section>
* {
margin: 0;
padding: 0;
}
html, body {
width: 600px;
height: 500px;
}
section {
margin: 0 auto;
width: 90%;
height: 90%;
background: grey;
position: relative;
}
section:before {
content: '';
display: block;
width: 50%;
height: 50%;
background: #eee;
top: 50%;
left: 0;
position: absolute;
}
section:after {
content: '';
display: block;
width: 50%;
height: 50%;
background: #eee;
top: 0;
right: 0;
position: absolute;
}
section div {
position: absolute;
opacity: .5;
z-index: 3;
}
#d0 {
background: red;
left: 50%;
top: 0;
}
#d1 {
background: blue;
top: 50%;
left: 50%;
}
#d2 {
background: green;
left: 0;
top: 50%;
}
#d3 {
background: yellow;
left: 0;
top: 0;
}