生成随机元素位置并防止JavaScript重叠

Question

我在页面上有一个holder div，我想在其中随机放置小图像作为拼贴，每个拼贴上都有10px的填充。

如何确定图像不会彼此重叠或不重叠div？有没有可以使用的插件或功能？

到目前为止，我的代码：

<script src="jquery-1.3.2.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function(){
$("#my_canvas img").each(
function(intIndex) {

var l = Math.floor(Math.random() * $("#my_canvas").width());
var t = Math.floor(Math.random() * $("#my_canvas").height());

$(this).css("left", l);
$(this).css("top", t);

$(this).bind(
    "click",
        function() {
            alert("l=" + l + " t=" + t);
        }
    );

}

);

}）;

   <style type="text/css">
    #my_canvas
    {
        background: #eee;
        border: black 1px solid;
        width: 800px;
        height: 400px;
    }
    #my_canvas img
    {
        padding: 10px;
        position:absolute;
    }
</style>

<div id="my_canvas">
    <img src="images/1.jpg" />
    <img src="images/9.jpg" />
    <img src="images/2.jpg" />
    <img src="images/3.jpg" />
    <img src="images/4.jpg" />
    <img src="images/5.jpg" />
    <img src="images/6.jpg" />
    <img src="images/7.jpg" />
    <img src="images/8.jpg" />
</div>

Answer 1

估计没有插件吧 我将像 Sander 建议的那样通过制作预定义的 div 网格并仅将随机图像加载到这些 div 来实现此目的。它比计算图像尺寸/位置更容易、更快，并且完成几乎相同的工作。不是随机的，但视觉上看起来不错:)