javascript - 如何在js中分散随机定位的图像？

Question

我在 JavaScript 中随机将图像放置在 Canvas 上。问题是我想最小化堆叠而不是阻止它。我希望看到这样的行为:如果有足够的图像适合 Canvas 而不重叠，它们就不会。但是，我希望图像不按顺序显示。有什么想法吗？

Answer 1

你可以均匀地放置它们，然后随机移动它们......像这样:

var w = 200, h = 150, leftOffset = 60, topOffset = 30, leftDeviation = 90, topDeviation = 60
for(i=0;i<5;i++)
    $('<div />').css({
        left:(i*w+leftOffset+Math.round(Math.random()*leftDeviation)),
        top:(topOffset+Math.round(Math.random()*topDeviation)),
        opacity:.6,width:w,height:h,backgroundColor:'red',position: 'absolute'}).appendTo('body')

此处演示:http://jsfiddle.net/y2hdE/

这包括网格布局:http://jsfiddle.net/y2hdE/1/

一旦您使用与我类似的公式放置了所有图像，您就可以随机选择照片掉落的位置，因此所有位置都是预先确定的，但顺序是随机的。