-1

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>
vzwick
  • 11,008
  • 5
  • 43
  • 63
Mike Vierwind
  • 1,482
  • 4
  • 23
  • 44
  • Don't add multiple questions for the same problem. Why not improve [the one you already asked](http://stackoverflow.com/questions/7807072/jquery-and-javascript-randomise-li-items-with-no-overlap)? – Widor Oct 18 '11 at 13:20
  • Or how can i do it with fixed positions??? No and is not a css problem. The script set the li items in different positions. But the div's are overlap. How can i fix this script. That i have no overlap. Or how can i fix this script. With fixed positions? – Mike Vierwind Oct 18 '11 at 13:30
  • `#parent_picture1 {position: relative;} #parent_picture1 div{ position: absolue;}` i meant something like this... overlap it's a css problem not a javascript, don't matter where the element is on the html you can always change it's position and depth with css. use z-index if you have to – Val Oct 18 '11 at 13:42
  • No that is not the solution. Look here: http://jsfiddle.net/5L9FN/2/ – Mike Vierwind Oct 18 '11 at 13:57

2 Answers2

1

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.

Community
  • 1
  • 1
meloncholy
  • 2,122
  • 18
  • 16
1

You need to save the coordinates of each random position in an array.

For each <li>:

  • Get a random coordinate pair random_coordinates.
    • Check random_coordinates against each pair in positions_array:
      • does random_coordinates[0] + the width of your <li> overlap the positions_array[i][0] + the width of your <li> range anywhere?
        • If yes, start over.
      • does random_coordinates[1] + the height of your <li> overlap the positions_array[i][1] + the height of your <li> range anywhere?
        • If yes, start over.
    • If no collisions have been detected, push the random_coordinates pair on positions_array, apply the css, proceed with the next <li> item.
vzwick
  • 11,008
  • 5
  • 43
  • 63
  • @MikeVierwind SO is not a "code this for me" site. My example already is pretty verbose and translates into code easily. – vzwick Oct 19 '11 at 09:38