javascript - 生成随机元素位置并防止在 JavaScript 中重叠

Question

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

如何确保图像永远不会相互重叠或 holder 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

将拾取的坐标存储在数组中，以便您可以将放置的每个新图像的坐标与之前的坐标进行比较。

如果您选择的坐标与之前的图像重叠，请选择新坐标。限制尝试次数，这样如果尝试 1000 次都无法放置图片，则可以从第一张图片重新开始。