javascript - 在加载/选择时随机化图像库

Question

这是我的第一个问题，对于任何格式问题、无知遗漏或过度解释，我深表歉意。我对 Javascript 几乎完全陌生，经过一天的尝试修改后，我决定寻求帮助。

当前:我有一个无序列表，用作选择器来显示与其关联的图库。我试图做的是修改下面的代码，使图像按随机顺序加载，而不是默认顺序(按最后添加的顺序加载)。我一直在尝试使用 Fisher Yates 方法，但我要么实现错误，要么只是感到困惑。如有任何帮助，我们将不胜感激，并感谢您花时间阅读本文。

 $('#artist-list li').click(function(event){
    event.preventDefault();
    var artist = $(this).attr('data-artist');

    // Highlight selected menu item
    $('#artist-list li').removeClass('active');
    $(this).addClass('active');

    // Show selected artist bio
    $('.artist-bio, .artist-image').hide();
    $('#artist-'+artist+', #artist-image-'+artist).show();

    $('#image-list li').not('.primary').hide();
    $('#image-list li.'+artist).show().children('a').attr('rel', artist);
}); // End click

$('#artist-list.departments li').click(function(event){
    event.preventDefault();
    var artist = $(this).attr('data-dept');

    // Highlight selected menu item
    $('#artist-list li').removeClass('active');
    $(this).addClass('active');

    // Show selected artist bio
    $('.artist-bio, .artist-image').hide();
    $('#artist-'+artist+', #artist-image-'+artist).show();

    $('#image-list li').not('.primary').hide();
    $('#image-list li.'+artist).show().children('a').attr('rel', artist);
}); // End click

Answer 1

我发现了这个小有用的插件，可以为您重新排列列表:

(function($){

    $.fn.shuffle = function() {

        var allElems = this.get(),
            getRandom = function(max) {
                return Math.floor(Math.random() * max);
            },
            shuffled = $.map(allElems, function(){
                var random = getRandom(allElems.length),
                    randEl = $(allElems[random]).clone(true)[0];
                allElems.splice(random, 1);
                return randEl;
           });

        this.each(function(i){
            $(this).replaceWith($(shuffled[i]));
        });

        return $(shuffled);

    };

})(jQuery);

并在列表上执行此操作，如下所示:

<ul id="gallery">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

调用它:

$('#gallery li').shuffle();

jsFiddle:http://jsfiddle.net/hescano/4XFQr/

来源:http://css-tricks.com/snippets/jquery/shuffle-dom-elements/