页面加载的随机Div顺序

Question

我有一堆ID为"gallerycard"的div.每当用户访问页面时,我都需要它们以随机顺序加载.

<div id="gallerycard">
     <div id="name">Akulina</div>
    <div id="info">N/A</div>
</div>

<div id="gallerycard">
     <div id="name">Martina</div>
    <div id="info">N/A</div>
</div>

<div id="gallerycard">
     <div id="name">Joseph</div>
    <div id="info">N/A</div>
</div>

<div id="gallerycard">
     <div id="name">Karen</div>
    <div id="info">N/A</div>
</div>
...    

和...

这是CSS的小提琴: http ://jsfiddle.net/BwJHj/

我知道这对你们大多数人来说都是一个简单的任务,但我有时候真的很讨厌jquery :(

谢谢

Answer 1

HTML

首先将所有ids 更改为classes自id页面上必须是唯一的.

<div class="gallerycard">
     <div class="name">Akulina</div>
    <div class="info">N/A</div>
</div>

<div class="gallerycard">
     <div class="name">Martina</div>
    <div class="info">N/A</div>
</div>

<div class="gallerycard">
     <div class="name">Joseph</div>
    <div class="info">N/A</div>
</div>
...    

CSS(因为标记现在使用类切换样式来反映)

.gallerycard {
    margin: 8px;
    float: left;
    height: 150px;
    width: 221px;
    background-color: rgba(0, 0, 0, .3);
    border-radius: 8px;
}

使用Javascript

从DOM中选择所有卡元素,然后在0和cards.length之间生成两个random.使用eq在所选择的元素来选择一个随机元素和在该组选定的eleemnts的另一随机选择的元素之前它的位置.

var cards = $(".gallerycard");
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));
}

JS小提琴: http ://jsfiddle.net/BwJHj/1/