0

私は現在、レスポンシブWebデザインを作成するためにアイソトープ（無限スクロール付き）を使用しています。

(function() {
    var $container = $('#container');

    $container.isotope({
        itemSelector : '.element'
    });

    $container.infinitescroll({
        navSelector  : '#page_nav',    // selector for the paged navigation 
        nextSelector : '#page_nav a',  // selector for the NEXT link (to page 2)
        itemSelector : '.element',     // selector for all items you'll retrieve
        loading: {
            finishedMsg: 'No more pages to load.',
            img: 'http://i.imgur.com/qkKy8.gif'
        }
    },
    // call Isotope as a callback
    function( newElements ) {
        $container.isotope( 'appended', $( newElements ) ); 
    }
);
});

より大きなバリエーションとして、これをこのスクリプトと組み合わせようとしましたが、すべての要素が重複していました。

参考までに、これは回転機能です。

$("#gallery2 img").each(function() {
    var rNum = (Math.random() * 4) - 2;  
    $(this).css({
        '-webkit-transform': 'rotate(' + rNum + '2deg)',
        '-moz-transform': 'rotate(' + rNum + '2deg)'  
    });
});

このローテーターを既存のjQueryに適切に統合するにはどうすればよいですか？

4

1 に答える 1

1

問題は、Isotopeが最新のブラウザのレイアウトにtransformプロパティを使用していることです。これは、rotateを設定するときにリセットします。

最良のオプションは、Isotope内の「transformsEnabled」オプションを無効にして、代わりに上/左の絶対位置を使用するように強制することです。これにより、回転の変換プロパティが解放されます。

http://isotope.metafizzy.co/docs/options.html#transformsenabled

于 2012-10-06T13:59:47.277 に答える