思路

首先把 container 划分为 4 个块,然后需要随机定位的 4 个块分别放到这 4 个区域,最后定义这 4 个块距离左边跟上边的最远,最近距离即可

相关代码

html

<section>
    <div id="d0"></div>
    <div id="d1"></div>
    <div id="d2"></div>
    <div id="d3"></div>
</section>

css

section {
    width: 100%;
    height: 100%;
    position: relative;
}
section div {
    position: absolute;
}
#d0 {
    left: 50%;
    top: 0;
}
#d1 {
    top: 50%;
    left: 50%;
}
#d2 {
    left: 0;
    top: 50%;
}
#d3 {
    left: 0;
    top: 0;
}

js

function rd(n,m){
    var c = m-n+1;  
    return Math.floor(Math.random() * c + n);
}

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')

demo

合抱之木,生于毫末;九层之台,起于累土;千里之行,始于足下。 —— 老子