SOURCE

console 命令行工具 X clear

                    
>
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;
}