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

【问题标题】：How do I randomize div elements on each page load?如何在每个页面加载时随机化 div 元素？
【发布时间】：2017-07-10 23:17:01
【问题描述】： 
<!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 类“col-lg-4 col-sm-6 col-xs-12”出现在 每次加载页面时随机顺序？我添加了一个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));
}

【问题讨论】：

标签： javascript html random


【解决方案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>

【讨论】：

  • 我似乎无法让它工作，我需要下载 javascript 吗？我必须下载 bootstrap 才能让响应式效果发挥作用。
  • 浏览器默认支持Javascript。是的，您需要下载引导程序才能正确显示页面样式
【解决方案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>

【讨论】：

  • 我很想使用它，因为我可以看到它在您的示例中有效，但我无法让它离线工作
  • 浏览器控制台有错误吗？是加载 jQuery.js 并在 document.ready 内之后的代码吗？
  • 对不起，我是新手，我在哪里加载 jQuery.js？刷新页面时控制台不显示任何内容
  • 尝试将代码封装在$(function(){ /* code here */})
猜你喜欢
  • 2019-12-01
  • 2013-12-01
  • 2016-05-01
  • 2020-06-28
  • 2015-04-09
  • 2011-01-23
  • 1970-01-01
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode