在网格中随机播放图像答案

【问题标题】：Shuffle images in a grid在网格中随机播放图像
【发布时间】：2014-10-10 02:23:22
【问题描述】：

我有一个响应式网格 whitin 图像。
我想通过随机播放功能对这些图片进行随机排序，但我不知道该怎么做。
任何想法？谢谢。

HTML

<div id="grid">  
    <div class="box"><img 1></div>
    <div class="box"><img 2></div>
    <div class="box"><img 3></div>
    <div class="box"><img 4></div>
</div>

脚本

$.shuffle('#grid div');

【问题讨论】：

理想情况下在服务器端进行，否则需要一段时间并且可能会引起注意。

标签： javascript grid shuffle

【解决方案1】：

这是我多年前提出的解决方案（从今天的旧代码重新创建）：

http://jsfiddle.net/bznfnb2r/1/

基本上，我所做的就是随机交换几个盒子：

$(function() {
    jQuery.extend({
        random: function(X) {
            return Math.floor(X * (Math.random() % 1));
        },
        randomBetween: function(MinV, MaxV) {
            return MinV + jQuery.random(MaxV - MinV + 1);
        }
    });

    jQuery.fn.swap = function (b) {
        b = jQuery(b)[0];
        var a = this[0];

        var t = a.parentNode.insertBefore(document.createTextNode(""), a);
        b.parentNode.insertBefore(a, b);
        t.parentNode.insertBefore(b, t);
        t.parentNode.removeChild(t);

        return this;
    }

    var numItems = $("#grid .box").length - 1;

    for (var i = 0; i < numItems; i++) {
        $("#grid .box:eq("+$.randomBetween(0, numItems)+")").swap("#grid .box:eq("+$.randomBetween(0, numItems)+")");
    };
});

这不是很好，但确实可以完成工作。

不过，正如我所说，我可能会改用这个服务器端。

【讨论】：

感谢您的回答，我找到了一个更简单的解决方案，您可以在我的回答中看到。

【解决方案2】：

这是我在以下链接中找到的解决方案，答案不清楚：jquery move elements into a random order

另外需要这个文件：
http://vestride.github.io/Shuffle/dist/jquery.shuffle.min.js

jQuery.fn.shuffle = function () {
    var j;
    for (var i = 0; i < this.length; i++) {
        j = Math.floor(Math.random() * this.length);
        $(this[i]).before($(this[j]));
    }
    return this;
};

$('#grid .box').shuffle();

【讨论】：