Insert Randomly But Never Next To Each Other

Based on Insert a div in a random location in a list of divs -- I'm trying to randomly insert some cat photos into a div of non-cat photos: http://jsfiddle.net/frank_o/QXdL3/21/ Bu

Solution 1:

I've fixed the issues and made a check to see if the next or previous element is a cat.

var target    = $('.main').find('.image'),
    frequency = 3,
    element   = $();

for (var i = 0; i < frequency; i++) {
    (functiongetElems() {
        element   = target.eq( Math.floor(Math.random() * target.length) );
        var next  = element.next(),
            prev  = element.prev(),
            all   = element.add(next, prev);

        if (element.hasClass('cat') || next.hasClass('cat') || prev.hasClass('cat')) getElems();
    }());

    var template  = $('.template div').clone(true);
    element.before(template);
}

FIDDLE

Solution 2:

Within your loop you could check to see whether the number generated is equal to the last number that was generated +-1

DEMO http://jsfiddle.net/QXdL3/22/

for (var i = 0; i < insertionFrequency; i++) {
    random = Math.floor(Math.random() * insertionTargetChildren.length) + 0;

    if (random != excludeNumA && random != excludeNumB) {
       insertionTargetChildren.eq(random).append(insertionTemplate);
    }
    excludeNumA = random + 1;
    excludeNumB = random - 1;
}

Solution 3:

You can shotgun the list, like the above answers, but this is a bit more efficient since you only need to inspect the precise objects you are inserting against, rather than inspecting every image.

Add 2 steps. The first should shuffle the array of images so that they're in a different order every time. The second should create an array of insertion points into the other list. If you don't want cat images to be next to each other, then make sure your list of insertion points, is at least spaced by 2.

You should also use <script type="text/template"> tags for your templates.

http://jsfiddle.net/kf2zU/1/

HTML

<scriptid="cat-template"type="text/template"><divclass="image"><imgsrc="http://placekitten.com/75/150" /></div></script><scriptid="img-template"type="text/template"><divclass="image"><imgsrc="http://lorempixel.com/75/150" /></div></script><divclass="main"></div>

JS

var catTemplate = $("#cat-template").html();
var imgTemplate = $("#img-template").html();

//place images into .mainvar $main = $(".main");
var numImages = 50;
for (var i = 0; i<numImages; i++){
    $main.append($(imgTemplate));
}

//make a list of cat images for examplevar numCatImages = 50;
var cats = [];
for (i = 0; i < numCatImages; i++){
    cats.push($(catTemplate));
}

//shuffle the cat list so they appear in random order
cats = _.shuffle(cats);

//create a list of insertion pointsvar insertionPoints = [];
var insertionIndex = 0;
var minSpacing = 2;
var maxSpacing = 8;
var spacingRange = maxSpacing - minSpacing;
while(insertionIndex < numImages){
    insertionIndex += Math.floor(Math.random() * spacingRange) + minSpacing;
    insertionPoints.push(insertionIndex);
}

//place cat images at the insertion points//it's important to start from the end and work your way forward so the previous insertions don't mess with subsequent insertion points//so we reverse the array of insertion points

insertionPoints = insertionPoints.reverse();
var catIndex = 0;
_.each(insertionPoints, function(insertionIndex, i){
    $main.children().eq(insertionIndex).after(cats[catIndex++]);
});