0

私は同位体をスムーズに実行していますが、可変サイズのクラス値を予測できない方法でリセットしているようです - 少なくとも私がその仕組みを理解している限り。
私の基本的な構造: ページ上部のボタンの列、AZ クラス = 文字。各ボタンは、div の新しいセットを読み込みます。

$(".letter").click(function() {
    if ($('.'+letX+'').length > 0 ) { // divs already loaded
    var newItems = $('.'+letX+''); // letX grabbed from div ID, a, b, etc.
    $(this).find('#container').after(newItems); // loads fine, should hold width2 height2 set on very first load
    }
    else {
    var stringData = $.ajax({ url: 'digz/index/'+$(this).attr("id")+'.txt', async: false }).responseText;
        var $newItems = $(stringData);
            $('#container').isotope( 'insert', $newItems );
    $('.element').each(function(index) {
        $(this).find('.titlePE').before('<p class="number">' + index + '</p>'); // add numbers for variable-sizes
    });
    variableSizes(); // new divs so set random width2 height2
    }
});

variableSizes の関数を設定して、もう少しわかりやすくします。上記の前に宣言..

function variableSizes() {
$container.find('.element').each(function(){ // add randomish size classes
    var $this = $(this), number = parseInt( $this.find('.number').text(), 10 );
//$this.removeClass('width2').removeClass('height2');
//$('.element').removeClass('width2').removeClass('height2');
// if ( !($this).hasClass('sized') ) {
    if ( number % 7 % 2 === 1 ) {  $this.addClass('width2'); } // $('div .nameP').html('wide');
    if ( number % 3 === 0 ) {  $this.addClass('height2'); }
//  $this.addClass('sized'); // }
    });
}

これは、標準の同位体ルーチンです。
私のレムは修正の試みです。ああ、if($(this).hasClass('sized')) テストのコードを省略
したようですが、可変サイズ ボタンをクリックすると (これにより、既に設定されている (random ) width2 height2. 次に、g = ナイス レイアウトをクリックします. 次に、h = ナイス、次に d、ナイス、次に再び g = がらくた. ほとんどの場合、幅 2、高さ 2、または高さ 2 に設定されます.

ここでプロセスの一部が欠けています。ランダムに設定された width2 height2 を維持するために、g - または d または ... を繰り返しクリックするにはどうすればよいですか? 予測可能である必要はありませんが、これは単なる派手なものですが、ある種の「いい」ものを保持する必要があります。
何か提案はありますか？

4

1 に答える 1

0

上記のロジックを記述した方法では、すべての要素を実行し、項目を Isotope に追加した後にサイズを調整します。

Isotope が使用している物のサイズを変更すると、レイアウト ルーチンの 1 つを再実行する必要があります。

次のいずれかを使用できますlayout。

.isotope( 'レイアウト', $items, コールバック)

指定された項目要素をレイアウトに配置します。

レイアウトは指定された要素のみを配置し、それらの要素はレイアウトの最後に配置されます。一方、reLayout は Isotope ウィジェットにすべての要素を配置します。

またreLayout

.isotope( 'reLayout', コールバック )

レイアウト プロパティをリセットし、すべての項目要素をレイアウトします。

必要な動作に応じて、次のことができます。

  1. IsotopevariableSizes()を呼び出す前に、要素の新しいリストを渡して呼び出します。insert
  2. を呼び出した後、上記のレイアウト ルーチンのいずれかを実行します。variableSizes()

次の例の利点はvariableSized()、関数に条件付きロジックを含める必要がないことですvariableSizes()。渡されたもののサイズを変更するだけです。

上記の #1 を使用して簡略化したものを次に示しDemo Fiddleます (すべてをランダム化するには、[Rnd] をクリックします)。

コード：

var fakeResults = { '.a': [], '.b': [], '.c': [] };

for (var key in fakeResults) {
    for (var i = 0; i < 20; ++i) {
        fakeResults[key].push(key + i);
    }
}


$(".letter").click(function () {
    var $this = $(this);
    var filter = $this.data('filter');

    /* Click on Rnd to randomize sizes */
    if($this.text() === "Rnd") {
        variableSizes($('.element'));
        $container.isotope('reLayout');
        return;
    }

    if ($('#container ' + filter).length === 0) {
        var newItems = $.map(fakeResults[filter], function (ele, idx) {
            return $('<div/>').addClass('element')
                              .addClass(filter.split('.').slice(-1).join(''))
                              .text(ele)[0];
        });

        /* Call variableSizes before 'insert' or see below comment */
        variableSizes($(newItems));
        $container.isotope('insert', $(newItems));

        /* This will work as well */
        //variableSizes($(newItems));
        //$container.isotope('reLayout');
    }
});

function variableSizes($newItems) {
    $newItems.removeClass('width2').removeClass('height2');
    $newItems.each(function(idx, ele) {
        var $this = $(this),
            number = Math.floor(Math.random() * (20))+ 1; 

        if (number % 7 % 2 === 1) {
            $this.addClass('width2');
        }
        if (number % 3 === 0) {
            $this.addClass('height2');
        }
    });
}

上記の #2 を使用していて、既にサイズ設定されている要素のランダム化を避けたい場合は、新しい要素のみを渡すか、何らかの理由で新しい要素を追跡できない場合は、既にサイズ設定されている要素にマーカー クラスを追加します。

このバージョンのvariableSizes()はそれを行います。sizedクラスを持たないコンテナー内のすべての要素を検索します。

Demo Fiddle

function variableSizes2() {
    $items = $container.find('.element:not(.sized)');
    $items.addClass('sized');

    $items.each(function(idx, ele) {
        var $this = $(this),
            number = Math.floor(Math.random() * (20))+ 1; 

        if (number % 7 % 2 === 1) {
            $this.addClass('width2');
        }
        if (number % 3 === 0) {
            $this.addClass('height2');
        }
    });
}
于 2013-09-15T23:29:56.827 に答える