Question

我制作了一个脚本（here's a fiddle that builds upon my JS），用于随机定位<li>元素。

但这些元素相互重叠。

如何修改我的代码以使项目不再重叠？

这是剧本：

var images = [];

function init() {
    $('.friend-selection li > div').each(function(){
        var id = this.id;
        var img = $('#img_' + id);
        var randomTop = 500*Math.random(); //random top position
        var randomLeft = 500*Math.random(); //random left position

        $("#parent_" + id).css({ //apply the position to parent divs
            top : randomTop,
            left : randomLeft
        });
    });
};

init();

我有这个HTML。带有li物品的ul：

<li id="parent_picture1">
    <div id="picture1">    
        <div class="glow"></div>
        <img src="static/img/voorbeeld/vrouw.jpg" width="111" height="166" id="img_picture1">
        <span class="name">Naam Achternaam</span>
    </div>      
</li>

Answer 1

我需要更多地了解这个问题，以决定我是如何做到的，但这里有一些可行的想法。

如果图像都具有相同的大小，您应该可以使用模数做一些事情，例如： randomTop = (500 * Math.random()) % picWidth。

当然你需要跟踪你已经使用过哪些插槽，所以如果图片阵列要密集，我可能会将插槽添加到一个随机数组并迭代它。

        var slots = [];

        for (var y = 0; y < 5; y++)
        {
            for (var x = 0; x < 5; x++)
            {
                slots.push([x, y]);
            }
        }

        slots.sort(function () { return (0.5 - Math.random()); });

        $('.friend-selection li > div').each(function() { ... }

（请注意我使用的随机方法isn't that great。）

如果图片尺寸不固定，事情会变得更复杂。我首先来看看jQuery Masonry代码，想法甚至是完整的解决方案。

Answer 2

您需要保存数组中每个随机位置的坐标。

对于每个<li>：

获取随机坐标对random_coordinates。
- 针对random_coordinates中的每一对检查positions_array：
  - random_coordinates[0] + the width of your <li>范围与positions_array[i][0] + the width of your <li>范围重叠吗？
    - 如果是，请重新开始。
  - random_coordinates[1] + the height of your <li>范围与positions_array[i][1] + the height of your <li>范围重叠吗？
    - 如果是，请重新开始。
- 如果未检测到任何冲突，请按random_coordinates上的positions_array对，应用css，继续下一个<li>项。

修复我的随机图像定位脚本，使图像不重叠

2 个答案: