javascript - 在网格中随机排列图像

Question

我有一个响应式网格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');

Answer 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)+")");
    };
});

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

正如我所说，我可能会在服务器端进行操作。