如何在每次加载页面时随机分配div元素？
[英]How do I randomize div elements on each page load?
问题描述
<!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()">☰</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>
How do I get the div class "col-lg-4 col-sm-6 col-xs-12" to appear in a random order every time the page is loaded? 
每次加载页面时，如何使div类“ col-lg-4 col-sm-6 col-xs-12”以随机顺序出现？ I added a js file with the following code but its not working. 我用以下代码添加了一个js文件，但无法正常工作。 Im building this page offline, do I need to download javascript for it to work like I had to for bootstrap? 我要离线构建此页面，我是否需要下载JavaScript才能使其正常工作，就像我必须进行引导一样？
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));
}
2 个解决方案
解决方案1
3 2017-07-10 23:29:29
Try this code instead 试试这个代码
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()">☰</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>
解决方案2
0 2017-07-10 23:29:42
Can use an array shuffle approach as in How can I shuffle an array? 作为可以使用数组洗牌的做法如何，我可以洗牌数组？
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何在每个循环中随机选择在JQuery中选择的元素 - How can I randomize elements selected in a JQuery each loop
如何在 div 中加载页面？ - How do I load a page in a div?
随机加载子元素 - Randomize children elements on load
如何在点击和页面加载时随机分配视频 - How to randomize video on click and on page load
页面加载时 Vue.js 中元素的随机/洗牌顺序 - Randomize/shuffle order of elements in Vue.js on page load
如何链接到新页面并使用ajax加载div？ - How do I link to a new page and load a div with ajax?
我如何在页面加载时滚动到特定的 div - How can i do scroll to specific div on page load
如何使用 JavaScript 在 div 中加载 HTML 页面？ - How do I load an HTML page in a div using JavaScript?
如何在jquery / javascript中随机化两组元素的顺序，以便它们与每个订单保持同步？ - How can I randomize the order of two sets of elements in jquery/javascript, so that they remain in sync with each order?
连续随机化每个 div 的颜色 - Randomize color of each div continuously
相关标签