HTML打乱div图像javascript



如何在结果中混洗这些图像。

<div class="row">
<div class="column">
<img src="https://i-h1.pinimg.com/736x/87/e9/38/87e938ab69a614cddb14a6866b2478d0.jpg" onclick="app();" style="width:100%">
<img src="https://i-h1.pinimg.com/564x/32/03/4f/32034f6da33f2932d88c6d6db7fa117a.jpg" style="width:100%">
<img src="https://i-h1.pinimg.com/736x/96/e6/54/96e654398c4b2cd7afc03410d636dbea.jpg" style="width:100%">
<img src="https://i-h1.pinimg.com/736x/4e/78/48/4e7848375fa721845f4986006229555a.jpg" style="width:100%">
</div>
<div class="column">
<img src="https://i-h1.pinimg.com/736x/1a/b0/d4/1ab0d4ef04e3e789396ae744f626c68a.jpg" style="width:100%">
<img src="https://i-h1.pinimg.com/736x/41/fd/31/41fd312937d0fd0e864d8fdd53f055ba.jpg" style="width:100%">
<img src="https://i-h1.pinimg.com/736x/06/98/94/069894936419220407b4b11edfca833d.jpg" style="width:100%">
<img src="https://i-h1.pinimg.com/736x/18/8b/bf/188bbfa47af6b445cf2a5a1869c90566.jpg" style="width:100%">
</div>  
</div>

如何使用js对这些图像进行混洗。每次都应该在顶部显示不同的图像。

<div id="deck">
<div><img src="" /></div>
<div><img src="" /></div>
.
.
.
</div>

// jQuery specific:
// 1) remove elements from DOM and convert them into a native JavaScript array
// 2) apply algorithm
// 3) inject the array back to DOM
var a = $("#deck > div").remove().toArray();
for (var i = a.length - 1; i >= 1; i--) {
var j = Math.floor(Math.random() * (i + 1));
var bi = a[i];
var bj = a[j];
a[i] = bj;
a[j] = bi;
}
$("#deck").append(a);

演示

最新更新