10

アイソトープについて質問です

jQuery の素晴らしいプラグインです。

私はしばらくそれをいじっていますが、2つのアイソトープテクニック、レスポンシブアイソトープとセンタリングアイソトープを組み合わせるには、javascriptについて十分に知りません。

レスポンシブ mod の使用に成功しましたが、かなりうまく機能しましたが、すべてを div 内で中央に配置する必要があります。中央レイアウト モードはレスポンシブ モードと同様に文書化されていないため、機能させるのに問題があります。基本的に、中央配置モードの説明は次のとおりです。

この mod を使用するには、デモのページ ソースにある改訂されたメソッドをコピーします。

残念ながら、ビュー ソースではあらゆる種類の JavaScript が使用されており、それを選択して、既に作業しているレスポンシブ スクリプトと組み合わせるには、JavaScript の経験が十分ではありません。

どんな助けでも大歓迎です。

必要なものの実例を掲載したサイト。

私が実験している私のサイト。

Firefoxの方がうまくいくと思います。

4

3 に答える 3

9

以下は、David DeSandro 自身が提供した例です。

http://jsfiddle.net/desandro/P6JGY/6/

于 2012-06-13T09:34:26.977 に答える
3

この jsfiddle はおそらくあなたの問題を解決します: http://jsfiddle.net/schmidjon/6Z3sn/。これは、ブレークポイントを使用した Isotope の単純な拡張です。

(function ($) {
var $container = $('.example'),
    colWidth = function () {
        var w = $container.width(), 
            columnNum = 1,
            columnWidth = 0;
        if (w > 1200) {
            columnNum  = 5;
        } else if (w > 900) {
            columnNum  = 4;
        } else if (w > 600) {
            columnNum  = 3;
        } else if (w > 300) {
            columnNum  = 2;
        }
        columnWidth = Math.floor(w/columnNum);
        $container.find('.item').each(function() {
            var $item = $(this),
                multiplier_w = $item.attr('class').match(/item-w(\d)/),
                multiplier_h = $item.attr('class').match(/item-h(\d)/),
                width = multiplier_w ? columnWidth*multiplier_w[1]-4 : columnWidth-4,
                height = multiplier_h ? columnWidth*multiplier_h[1]*0.5-4 : columnWidth*0.5-4;
            $item.css({
                width: width,
                height: height
            });
        });
        return columnWidth;
    },
    isotope = function () {
        $container.isotope({
            resizable: false,
            itemSelector: '.item',
            masonry: {
                columnWidth: colWidth(),
                gutterWidth: 4
            }
        });
    };
    isotope();
    $(window).smartresize(isotope);
}(jQuery));

出典:流動的なレイアウトで石積みに jQuery Isotope を使用する

于 2013-10-03T15:14:17.477 に答える
-1

子コンテンツのクラスごとに、css ファイルのトランジションを使用してみてください。それは役立つはずであり、より遅くなる可能性があります

.css

 -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;

これが機能することを願っています

于 2013-09-15T18:34:21.190 に答える