jQuery: portfolio sortable con ordinamento random

Creare un portfolio in HTML e CSS è un compito relativamente semplice. Creare invece una funzionalità di sorting sugli elementi del portfolio con jQuery è invece qualcosa che richiede un minimo di preparazione.

Partiamo da una struttura HTML divisa in due componenti: un menu da cui selezionare le categorie del portfolio e gli elementi del portfolio stesso:


<p id="catpicker">
    <a href="#" id="allcat" class="current">VIEW ALL</a> | 
    <a href="#" id="a" class="filter">A</a> | 
    <a href="#" id="b" class="filter">B</a> | 
    <a href="#" id="c" class="filter">C</a> | 
    <a href="#" id="d" class="filter">D</a>
</p>

<div class="item a">...</div>
<div class="item b">...</div>
<div class="item c">...</div>
<div class="item d">...</div>

Fondamentale per il successivo codice jQuery la corrispondenza tra gli ID dei link e le classi CSS applicate agli elementi del portfolio (ad eccezione del primo link che avrà la funzione di mostrare tutti gli elementi).

A questo punto vogliamo aggiungere anche un effetto casuale (random) all'ordine degli elementi, quindi creiamo il seguente plugin di utility:


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

Questo plugin converte un set di elementi in un array, lo riordina in modo casuale e sostituisce ciascun elemento del set originale con un elemento preso dal nuovo array.

Ora possiamo creare il codice jQuery che ci interessa:


$(function() {

    $(".item").css("opacity", "0.8").hover(function() {
        $(this).css("opacity", "1");
    }, function() {
        $(this).css("opacity", "0.8");
    })


    $("#allcat").click(function() {
        $(".item").slideDown();
        $("#catpicker a").removeClass("current");
        $(this).addClass("current");
        return false;
    });

    $(".filter").click(function() {
        var thisFilter = $(this).attr("id");
        $(".item").slideUp();
        $("." + thisFilter).slideDown();
        $("#catpicker a").removeClass("current");
        $(this).addClass("current");
        return false;
    });

    $(".item").shuffle();

});​

Abbiamo due azioni distinte: il primo link del menu mostra tutti gli elementi, mentre gli altri selezionano solo quegli elementi la cui classe CSS corrisponde all'ID del link corrente.

Torna su