Javascript 随机插入，但不要彼此相邻

基于--我正在尝试将一些cat照片随机插入到一组非cat照片中：

但是有没有办法防止这些猫依次出现在一起呢？它们应该分散开来

JS:

var insertionTemplate=$（'.template'）.find（'.image'）.html（），
insertionTargetChildren=$（'.main'）.find（'.image'），
插入频率=3；
var随机；
对于（var i=0；i

HTML:

---

在循环中，您可以检查生成的数字是否等于生成的最后一个数字+-1

演示

for（变量i=0；i

我已修复了问题，并检查了下一个或上一个元素是否为cat

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

for (var i = 0; i < frequency; i++) {
    (function getElems() {
        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);
}

var target=$（'.main'）.find（'.image'），
频率=3，
元素=$（）；
对于（变量i=0；i

---

您可以像上面的答案一样快速查看列表，但这会更有效率，因为您只需要检查插入的精确对象，而不是检查每个图像

添加2个步骤。第一种方法应该对图像数组进行洗牌，使它们每次都以不同的顺序排列。第二个应该在另一个列表中创建一个插入点数组。如果不希望cat图像彼此相邻，请确保插入点列表的间距至少为2

您还应该为模板使用

标记

HTML

JS

var catTemplate=$（“#cat模板”）.html（）；
var imgTemplate=$（“#img模板”）.html（）；
//将图像放入.main
变量$main=$（“.main”）；
var numImages=50；
对于（var i=0；i在顺序中彼此相邻，或者在术语或边距/填充/间距中彼此相邻？@j08691感谢您指出这一点！顺序。更新的问题。看起来您在演示中使用了一些插件，请不要忘记在问题中提及它，如果它有相应的标记，也要标记它。您知道您没有真的插入了一个模板，但只是用另一个随机图像粘贴图像？@KingKing插件不相关，但是我已经从演示中删除了它。谢谢，但是@adeneo刚刚指出了一个问题。我应该在尝试修复它时关闭这个问题吗？@MarkBoulder-做了一些更改，第一类检查没有正常工作，但现在应该是这样了。有点奇怪，为什么
var-template
不能与其他变量一起使用呢？还有，下面的Patrick Gundersen的例子，特别是：“这更有效，因为你只需要检查插入的精确对象，而不是检查每个图像。”--我们应该在我们的列表中添加类似的内容吗？至于效率，您可以在循环之外对整个列表进行替换，这将使它更快，并且可能比下面Patrick Gunderson的答案快得多。我添加了一些计时器，以查看逻辑和插入需要多长时间，这里->和这里，我的解决方案似乎是快了三倍。再往前走一步，将它粘贴到jsperf中，这表明Gunderson解决方案的速度惊人地慢，太慢了，我想我一定是在jsperf中做错了什么，但我看不出任何错误，所以我猜它效率非常低->哇，这真的很酷。我不知道脚本模板标记！但@ad不是吗eneo的答案要简单得多？@adeneo的解决方案更简单，但效率要低得多。我的解决方案将插入cats所需的步骤降至最低，而adeneo的解决方案则要求您在每次迭代中检查多个元素的多个属性。对于小列表，这可能微不足道，但对于大列表，我的解决方案将快几个数量级。我的解决方案也是可调的，因此您可以更好地控制间距。这是代码效率方面的一个很好的教训。谢谢。我真的很感激。我可能会将此标记为正确的，但在我的情况下，猫本身不需要洗牌，并且Lorempixel图像是预先存在的服务器端图像。希望有一天我能给您买杯啤酒！
<div class="template" style="display: none;">
    <div class="image">
        <img src="http://placekitten.com/75/150" />
    </div>
</div>
<div class="main">
    <div class="image">
        <img src="http://lorempixel.com/75/150" />
    </div>

    <!-- ... -->

</div>

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

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

for (var i = 0; i < frequency; i++) {
    (function getElems() {
        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);
}

<script id="cat-template" type="text/template">
    <div class="image">
        <img src="http://placekitten.com/75/150" />
    </div>
</script>
<script id="img-template" type="text/template">
    <div class="image">
        <img src="http://lorempixel.com/75/150" />
    </div>
</script>
<div class="main">
</div>

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

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

//make a list of cat images for example
var 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 points
var 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++]);
});