2

同位体ライブラリを実装しようとしているので、メニューの周りで要素が並べ替えられます。いくつかの調査とツールを使用した後、アイソトープ コンテナーの最初の要素をメニュー項目として設定することにしました。次に、フィルタリングまたはソートに関する操作からそれを除外します。

右揃えの要素でのみ機能するコーナースタンプの制限のため、コーナースタンプ法ではなくこの方法を選択しました（私が理解していることから-私はそれを使用するのを見逃す可能性があります..）。メニューを左上隅に配置したいのですが。

私が遭遇している問題はシャッフルにあります。最初の要素 (この例ではメニュー) を除くすべての要素の位置をランダム化しようとしています。メニューはそのままにしておきたい。シャッフルを使用してすべての要素をランダムに並べ替えようとすると、使用可能なリストからメニュー項目を除外してシャッフルすることができません。これにより、サブナビゲーションが飛び去ることを決定したときに、いくつかのナビゲーション..問題が発生します。

レイアウトの例を次に示します: http://jsfiddle.net/ufomammut66/xwpuk/30/

これまでのところ、私は試しました： $('.container').isotope('shuffle');

この関数には 1 つのパラメーター (コールバック) しかありません。ここで選択プロセスを操作する方法がわかりません。

sort 関数の使用を検討しましたが、何らかの理由で取得できません: $('.container').isotope({ sortBy : 'random' });複数回起動する。そうしたとしても、これを利用してメニューを除外する方法はまだわかりません。

どんな助けでも大歓迎です、ありがとう！

EDIT :並べ替え可能なオブジェクトに数字を含めるように jsFiddle リンクを更新しました - 並べ替え作業を示すのに役立ちます。

EDIT 2：問題に詳細を追加しました。

4

1 に答える 1

1

同位体は並べ替えをキャッシュするので、既に行った並べ替えを再計算する必要はないと思います。「ランダム」でもこれを行うようです。

修正/ハックはreloadItems、ランダムソートの後にあります:

$('#reorder').click(function () {
    $('.container').isotope({sortBy: 'random'}).isotope('reloadItems');
});

デモ: http://jsfiddle.net/nT66r/

メニュー項目のフィルタリングに関しては、random は乱数を返すだけなので、できることはあまりありません。ただし、メニューを「フィルタリング」できるカスタム ランダム ソートを作成できます。

getSortData: {
    name: function ($elem) {
        return $elem.data('name');
    },
    myrandom: function ($elem) {
        if($elem.hasClass('menu')) {
             return -1;   
        }
        return Math.random();
    }
}

デモ: http://jsfiddle.net/PvnMn/

はクラスであるため、複数のアイテムmenuがある場合は、奇妙に思われる可能性があることに注意してください。menuID が 1 つしかない場合は、ID を選択することをお勧めします。その場合、$elem.is('#menu')代わりにを使用します$elem.hasClass('menu')。

と#menu: http://jsfiddle.net/PvnMn/1/

これは、他の種類のフィルタリングに私の刺し傷を付けたバージョンです: http://jsfiddle.net/jtbowden/Vuqgu/

于 2013-02-27T00:33:40.673 に答える