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

发布于 2024-12-10 19:41:41 字数 1032 浏览 2 评论 0原文

我制作了一个脚本（这是一个基于我的 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>

原文

I made a script (here's a fiddle that builds upon my JS) for random positioning of <li> elements.

The elements overlap each other, though.

How can i modify my code so the items don't overlap anymore?

This is the script:

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();

I have this html. A ul with li items:

<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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

潇烟暮雨 2024-12-17 19:41:42

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

如果图像全部具有相同的大小，您应该能够使用模数执行某些操作，例如 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() { ... }

（请注意，我使用的随机方法不是'太好了。）

如果图片没有固定尺寸，事情就会变得更加复杂。我首先查看 jQuery Masonry 获取代码、想法甚至完整的解决方案。

I'd need to know a bit more about the problem to decide how I'd do this, but here are some ideas that may work.

If the images all have the same size, you should be able to do something using modulus, e.g. randomTop = (500 * Math.random()) % picWidth.

Of course you'd need to keep track of which slots you've already used, so if the pictures array is going to be dense I'd probably add the slots to a random array and iterate through it.

        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() { ... }

(Note that the random method I used isn't that great.)

If the pictures aren't of a fixed size, things get more complicated. I'd start by taking a look at jQuery Masonry for code, ideas or even a complete solution.

回复收藏 0 原文

眉黛浅 2024-12-17 19:41:42

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

对于每个

：

获取一个随机坐标对random_coordinates。
- 对照 positions_array 中的每一对检查random_coordinates：
  - random_coordinates[0] +
  - 的宽度是否与 positions_array[i][0] +
  - 范围的宽度重叠任何地方？
    - 如果是，请重新开始。
  - random_coordinates[1] +
  - 的高度是否与 positions_array[i][1] +
  - 范围的高度重叠任何地方？
    - 如果是，请重新开始。
- 如果未检测到冲突，则将 random_coordinates 对推送到 positions_array 上，应用 CSS，继续执行下一个
- 项目。