Question

<!DOCTYPE html>
<html lang="en">
<head>
<title>Site Name</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<link href="bootstrap.css" rel="stylesheet" />
<link href="bootstrap-theme.css" rel="stylesheet" />
<script type="text/javascript" src="script.js"></script>
</head>
<body>

<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">

 </div>
<div class="navhead" id="myNavbar">
  <ul class="nav navbar-nav">
    <a>Site Name</a>
    <a href="#">Home</a>
    <a href="#">Under $20</a>
    <a href="#">Under $100</a>
    <a href="#">Ballin</a>
    <a href="#">For Him</a>
    <a href="#">For Her</a>
    <a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;</a>
  </ul>
</div>
</div>

</nav>


<div class="container-fluid">

<div class="row">
<div class="col-lg-4 col-sm-6 col-xs-12" style="border: 2px solid black; width: 350px; height: 450px;"><a href="######" target="_blank"><p style="font-size: 20px;" align="center">######</p><img src="######.jpg"><p>######</p><p style="font-size: 20px;">######<button type="button" style="float: right;">More info</button></p></div>

<div class="col-lg-4 col-sm-6 col-xs-12" style="border: 2px solid black; width: 350px; height: 450px;"><a href="######" target="_blank"><p style="font-size: 20px;" align="center">######</p><img src="######.jpg"><p>######</p><p style="font-size: 20px;">######<button type="button" style="float: right;">More info</button></p></div>

<div class="col-lg-4 col-sm-6 col-xs-12" style="border: 2px solid black; width: 350px; height: 450px;"><a href="######" target="_blank"><p style="font-size: 20px;" align="center">######</p><img src="######.jpg"><p>######</p><p style="font-size: 20px;">######<button type="button" style="float: right;">More info</button></p></div>

<div class="col-lg-4 col-sm-6 col-xs-12" style="border: 2px solid black; width: 350px; height: 450px;"><a href="######" target="_blank"><p style="font-size: 20px;" align="center">######</p><img src="######.jpg"><p>######</p><p style="font-size: 20px;">######<button type="button" style="float: right;">More info</button></p></div>

<div class="col-lg-4 col-sm-6 col-xs-12" style="border: 2px solid black; width: 350px; height: 450px;"><a href="######" target="_blank"><p style="font-size: 20px;" align="center">######</p><img src="######.jpg"><p>######</p><p style="font-size: 20px;">######<button type="button" style="float: right;">More info</button></p></div>

<div class="col-lg-4 col-sm-6 col-xs-12" style="border: 2px solid black; width: 350px; height: 450px;"><a href="######" target="_blank"><p style="font-size: 20px;" align="center">######</p><img src="######.jpg"><p>######</p><p style="font-size: 20px;">######<button type="button" style="float: right;">More info</button></p></div>

<div class="col-lg-4 col-sm-6 col-xs-12" style="border: 2px solid black; width: 350px; height: 450px;"><a href="######" target="_blank"><p style="font-size: 20px;" align="center">######</p><img src="######.jpg"><p>######</p><p style="font-size: 20px;">######<button type="button" style="float: right;">More info</button></p></div>

 </div>
</div>

</body>
</html>

如何获得div class＆＃34; col-lg-4 col-sm-6 col-xs-12＆＃34;出现在每次加载页面时是否随机排序？我添加了一个js文件以下代码，但它不起作用。我是离线构建此页面，我是否需要下载javascript让它像我必须用于bootstrap一样工作？

var cards = $(".col-lg-4 col-sm-6 col-xs-12");
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));
}

Answer 1

尝试使用此代码

var parent = document.querySelector(".container-fluid .row");
for(var i = 0; i < parent.children.length; i++){
  parent.appendChild(parent.children[Math.random() * i | 0]);
}

<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">

 </div>
<div class="navhead" id="myNavbar">
  <ul class="nav navbar-nav">
    <a>Site Name</a>
    <a href="#">Home</a>
    <a href="#">Under $20</a>
    <a href="#">Under $100</a>
    <a href="#">Ballin</a>
    <a href="#">For Him</a>
    <a href="#">For Her</a>
    <a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;</a>
  </ul>
</div>
</div>

</nav>


<div class="container-fluid">

<div class="row">
<div class="col-lg-4 col-sm-6 col-xs-12" style="border: 2px solid black; width: 350px; height: 450px;"><a href="######" target="_blank"><p style="font-size: 20px;" align="center">######</p><img src="######.jpg"><p>######</p><p style="font-size: 20px;">######<button type="button" style="float: right;">More info1</button></p></div>

<div class="col-lg-4 col-sm-6 col-xs-12" style="border: 2px solid black; width: 350px; height: 450px;"><a href="######" target="_blank"><p style="font-size: 20px;" align="center">######</p><img src="######.jpg"><p>######</p><p style="font-size: 20px;">######<button type="button" style="float: right;">More info2</button></p></div>

<div class="col-lg-4 col-sm-6 col-xs-12" style="border: 2px solid black; width: 350px; height: 450px;"><a href="######" target="_blank"><p style="font-size: 20px;" align="center">######</p><img src="######.jpg"><p>######</p><p style="font-size: 20px;">######<button type="button" style="float: right;">More info3</button></p></div>

<div class="col-lg-4 col-sm-6 col-xs-12" style="border: 2px solid black; width: 350px; height: 450px;"><a href="######" target="_blank"><p style="font-size: 20px;" align="center">######</p><img src="######.jpg"><p>######</p><p style="font-size: 20px;">######<button type="button" style="float: right;">More info4</button></p></div>

<div class="col-lg-4 col-sm-6 col-xs-12" style="border: 2px solid black; width: 350px; height: 450px;"><a href="######" target="_blank"><p style="font-size: 20px;" align="center">######</p><img src="######.jpg"><p>######</p><p style="font-size: 20px;">######<button type="button" style="float: right;">More info5</button></p></div>

<div class="col-lg-4 col-sm-6 col-xs-12" style="border: 2px solid black; width: 350px; height: 450px;"><a href="######" target="_blank"><p style="font-size: 20px;" align="center">######</p><img src="######.jpg"><p>######</p><p style="font-size: 20px;">######<button type="button" style="float: right;">More info6</button></p></div>

<div class="col-lg-4 col-sm-6 col-xs-12" style="border: 2px solid black; width: 350px; height: 450px;"><a href="######" target="_blank"><p style="font-size: 20px;" align="center">######</p><img src="######.jpg"><p>######</p><p style="font-size: 20px;">######<button type="button" style="float: right;">More info7</button></p></div>

 </div>
</div>

Answer 2

可以使用How can I shuffle an array?

中的数组 shuffle 方法

var $cont = $('#content'),
  itemsArr = $cont.children().get();


$cont.append(shuffle(itemsArr))

function shuffle(a) {
    var j, x, i;
    for (i = a.length; i; i--) {
        j = Math.floor(Math.random() * i);
        x = a[i - 1];
        a[i - 1] = a[j];
        a[j] = x;
    }
    return a;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row" id="content">
  <div class="col-lg-4 col-sm-6 col-xs-12">Item #1</div>
  <div class="col-lg-4 col-sm-6 col-xs-12">Item #2</div>
  <div class="col-lg-4 col-sm-6 col-xs-12">Item #3</div>
  <div class="col-lg-4 col-sm-6 col-xs-12">Item #4</div>
  <div class="col-lg-4 col-sm-6 col-xs-12">Item #5</div>
  <div class="col-lg-4 col-sm-6 col-xs-12">Item #6</div>
  <div class="col-lg-4 col-sm-6 col-xs-12">Item #7</div>
  <div class="col-lg-4 col-sm-6 col-xs-12">Item #8</div>
  <div class="col-lg-4 col-sm-6 col-xs-12">Item #9</div>
  <div class="col-lg-4 col-sm-6 col-xs-12">Item #10</div>
</div>

如何在每个页面加载时随机化div元素？

2 个答案: