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

这不是很好，但确实有效。

正如我所说，我可能会改为服务器端。

Answer 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();

在网格中随机播放图像

2 个答案: