Home » Javascript » Randomize div tags without any empty spaces [on hold]

Randomize div tags without any empty spaces [on hold]

Posted by: admin June 30, 2018 Leave a comment

Questions:

I want to shuffle my divs without any empty spaces. I used JavaScript code to shuffle, but it’s not working properly and it sometimes shows empty spaces after reloading the page.

This is my JavaScript code:

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

And this is my sample div tag:

<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>
Answers: