1

私はこのプラグインを使用しています: http://masonry.desandro.com/

現在、960px レイアウト用のプラグインを初期化しています。このためのコードは次のとおりです。

<script>

$(function(){

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

    $container.imagesLoaded( function(){
      $container.masonry({
        itemSelector : '.box',
        gutterWidth: 8,
            // Want to change this here:
        columnWidth: 113
      });
    });

  });
</script>

画面幅またはブラウザ ウィンドウ幅が 1225px より大きい場合、columnWidth の数値を 113 から 146 に変更したいと考えています。どうすればいいですか？

4

2 に答える 2

4 
columnWidth: $(document).width() > 1225 ? 146 : 113
于 2012-02-08T15:39:31.550 に答える
0

ウィンドウのサイズ変更でこれを行う場合は、サイズ変更イベントにハンドラーをアタッチする必要があります。イベントハンドラーで、必要に応じて$（yourdiv）.masonry（{columnWidth：}）を呼び出します。

ここでjquery.resizeプラグインも調べてみてください：http：//benalman.com/projects/jquery-resize-plugin/-一部の（ほとんどの）ブラウザは、ウィンドウのサイズが変更されている間、サイズ変更イベントを常に送信します。ユーザーがしきい値のすぐ近くをホバリングすると、多くの再レイアウトが発生する可能性があります。

于 2012-02-08T15:48:37.477 に答える