Generate 'random' Numbers Between X And Y With A Difference Of At Least 100

I'm trying to position images within a banner div on a web page. The images need to be positioned 'randomly' along the x axis (using the CSS left property), so they don't always a

Solution 1:

UPDATE

Sorry, I didn't realize you needed that comparison across all generated values. This will work:

var isLessThanMinSeparation = functioncheckDiff(randomNumber, randomNumbers, minSeparation) {
    var lessThan100 = false,                // Flag for whether minSeparation has been maintained
        i = 0;                              // Incrementerconsole.log('randomNumber = ' + randomNumber);
    for (i = 0; i < randomNumbers.length; i += 1) {
        console.log('Diff between ' + randomNumbers[i] + ' and ' + randomNumber + ' = ' + Math.abs(randomNumbers[i] - randomNumber));
        lessThan100 = lessThan100 || Math.abs(randomNumbers[i] - randomNumber) <= minSeparation;
    }
    return lessThan100;
};
var randomImagePlacement = functionrandomImagePlacement(numberOfItems, minSeparation) {
    //numberOfItems = 5,                    // Total number of items//minSeparation = 100,                  // Minimum number of pixels of separation between itemsvar randomNumbers = [],                 // Array 'container' to hold random numbers
        randomNumber = 0,                   // Random number
        i = 0;                              // Incrementerfor (i = 1; i <= numberOfItems; i += 1) {
        while (isLessThanMinSeparation(randomNumber, randomNumbers, minSeparation)) {
            randomNumber = Math.floor(Math.random() * 700) + 1;
        }
        randomNumbers.push(randomNumber);
    }
    return randomNumbers;
};
console.log(randomImagePlacement(5, 100));

The way I'd accomplish this would be to:

1. Store the last randomly-assigned position
2. Use a loop (with a minimum run of once) to assign the new randomly-assigned position
3. Compare the new randomly-assigned position and re-enter the loop if the difference < 100

An example:

var randomizeImgPlacement = functionrandomizeImgPlacement() {
    var i = 0,
        delay = 0,
        xPos = 0,
        lastPos = 1000; //Default to 1000 so very first assignment has at least 100 differencefor (i = 1; i <= 5; i += 1) {
        delay = Math.floor(Math.random() * 800) + 1;
        do { //loop assignment of xPos
            xPos = Math.floor(Math.random() * 900) + 1;
        } while (Math.abs(xPos) - Math.abs(lastPos) >= 100); // while difference is < 100
        $('#item' + i).css('left', xPos + 'px').delay(delay).animate({
            top: 18
        }, {
            duration: 1000,
            easing: 'easeOutBounce'
        });
        lastPos = xPos; //store lastPos for loop comparison
    }
};

Solution 2:

A possible way you could approach this is:

item0.x = //random number

item1.x = item0.x+item0.width + 100 + (random number)

item2.x = item1.x+item1.width + 100 + (random number)

etc.