javascript - 随机化 div 标签，没有任何空格

Question

我想洗牌我的 div s 没有任何空格。我使用 JavaScript 代码进行随机播放，但它无法正常工作，并且有时在重新加载页面后会显示空白。

这是我的 JavaScript 代码:

var cards = $(".random");
for(var i = 0; i < cards.length; i++){
    var target = Math.floor(Math.random() * cards.length -1) + 1;
    var target2 = Math.floor(Math.random() * cards.length -1) + 1;
    cards.eq(target).before(cards.eq(target2));
}

这是我的示例 div 标签:

<div class="col-sm-4 random" align="center" id="random">
    <div class="thumbnail" id="border">
        <a href="#modal-2" onclick="lockScroll()"><img src="img/findmyfare.jpg" style="width:100%" class="d-block w-100" class="img-fluid"></a>
        <div class="caption offers">
            <a href="#modal-2" onclick="lockScroll()">
                <div class="offer-wrap">
                    <div class="img-wrap" data-backimg="offers-shopping">
                    </div>
                    <div class="title2">
                        <h5 style="text-align:left;padding-left:10px;color:white;">Up to 25% off on flight<br>
                            bookings
                        </h5>
                    </div>
            </a>
        </div>
        <h4 style="padding-top:10px; color:#262362;text-align:left;font-size: 125% !important; cursor: pointer;" href="#modal-2" onclick="lockScroll()">findmyfare</h4>
           <p style="text-align:left; cursor: pointer;" class="text2" href="#modal-2">Offer valid from 20 June - 20 July 2017</p><br>
       </div>
    </div>

Answer 1

您并不是真正洗牌，而是将牌从原来的位置移动到新位置。结果是原始位置变空 - 并且它将保持为空，除非 random() 稍后碰巧选择该空位置作为目标。

这个隐藏的代码片段将可视化(运行它，然后按随机播放按钮):

function shuffle() {
  var cards = $(".random");
  for (var i = 0; i < cards.length; i++) {
    var target = Math.floor(Math.random() * cards.length - 1) + 1;
    var target2 = Math.floor(Math.random() * cards.length - 1) + 1;
    cards.eq(target).before(cards.eq(target2));
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
[<span class="random">A</span>]
[<span class="random">B</span>]
[<span class="random">C</span>]
[<span class="random">D</span>]
[<span class="random">E</span>]
[<span class="random">F</span>]
[<span class="random">G</span>]
[<span class="random">H</span>]
<br/>
<button onclick="shuffle()">shuffle</button>

您可以通过区分位置与卡片本身来改进这一点，然后通过进行实际的卡片交换，这样位置将始终包含正好一张卡。

使用新方法时，索引计算需要有所不同，因此我也进行了更改。

改进的代码片段:

function shuffle() {
  var cards = $(".random");
  for (var i = 0; i < cards.length; i++) {
    var index1 = Math.floor(Math.random() * cards.length);
    var index2 = Math.floor(Math.random() * cards.length);
    var card1 = cards.eq(index1);
    var card2 = cards.eq(index2);
    var location1 = card1.closest(".location");
    var location2 = card2.closest(".location");
    location1.append(card2);
    location2.append(card1);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
[<span class="location"><span class="random">A</span></span>]
[<span class="location"><span class="random">B</span></span>]
[<span class="location"><span class="random">C</span></span>]
[<span class="location"><span class="random">D</span></span>]
[<span class="location"><span class="random">E</span></span>]
[<span class="location"><span class="random">F</span></span>]
[<span class="location"><span class="random">G</span></span>]
[<span class="location"><span class="random">H</span></span>]
<br/>
<button onclick="shuffle()">shuffle</button>