我如何在js中分散随机位置的图像

How can I spread out randomly located images in js?

本文关键字：随机 位置 图像 分散 js      更新时间：2023-09-26

我在javascript中随机将图像放在画布上。问题是我想要最小化堆叠，而不是阻止堆叠。我想看到的行为，如果有足够的图像适合在画布上没有重叠，他们不会。然而，我希望这些图像看起来不是有序的。什么好主意吗?

你可以将它们均匀放置，然后随机移动一点…像这样:

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/

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

你的进场距离有多远?你说你可以，但不想阻止堆叠。你为什么不使用你的算法，添加预防并根据随机数做一些例外呢?

我最终选择了一个倒正态分布，这可能会在中间留出空间，让图像可以被查看，而外面的图像更有可能被堆叠。

相关文章：