繰り返し要素をランダムに並び替えるJS

繰り返し要素をリロードするたびにランダムに配置したい、という時に。
特にMTで、レコメンド表示とかに使うと、サイトが動いてる様子が使える。（WPは記事ランダム並び替えが元々あるから気にすることはないか）
とりあえず呼び出したい内容をすべて書いて、cssで必要数以外をdisplay:noneしちゃえば、更にそれっぽく。

本来であれば、jsonとかに書き出して、jsで抽出して・・・ってのが正攻法なやりかただが、jsonを理解できてないので無理やりなやり方として。
.shuffle_wrapで囲って、中の要素を.shuffle_boxで作れば、.shuffle_boxが付いた要素が並び変わる。

欠点は、jsonのように抽出ではなく、必要数表示→このjsで並び替え→cssでdisplay表示というルートをたどるわけなので、最初の必要数表示が多いとページの読み込みが重くなる
。しかもjsが効くのは読み込みが終ってからなので一瞬そのすべての表示が行われてしまい、一瞬画面が崩れたように見える、という所。
PCならまだしもSPの時は少々欠点に近いかもしれないが、とりあえずは。

$(document).ready(function() {
    var items = $('.shuffle_box'); // 全ての要素を取得
    var container = $('.shuffle_wrap'); // アイテムの親要素を取得

    // シャッフル関数を定義
    function shuffle(array) {
        for (var i = array.length - 1; i > 0; i--) {
            var j = Math.floor(Math.random() * (i + 1));
            var temp = array[i];
            array[i] = array[j];
            array[j] = temp;
        }
        return array;
    }

    // 要素をシャッフル
    var shuffledItems = shuffle(items.toArray());

    // シャッフルされた順序で要素を再配置
    container.empty(); // コンテナを空にする
    $(shuffledItems).appendTo(container); // シャッフルされた要素を再追加
});