0

私は基本的に、ブラウザウィンドウまたは画面幅が特定の数値を下回ったときに、石工スクリプトのレイアウトを変更しようとしています。ブラウザの幅を変更したときに（リアルタイムで）応答するようにしたいのですが、現時点では壊れています。また、何らかの理由で、最初にロードされたスクリプトのみが機能します。Masonry の isResizable:true オプションを既にテストしましたが、必要な効果が得られません。誰でも修正を提供できますか？これは Masonry のページです。誰かがこのページに関する解決策を見つけるのを手伝ってくれるかどうか疑問に思っています: http://masonry.desandro.com/docs/methods.html

これが私のコードです：

function checkWidth() {

  var winW = $(window).width();
  var Body = $('body');

  alert(0)

  if (screen.width >= 1225 || winW >= 1225) {
    $(document).ready(function() {

      alert(1)

      Body.css({ 'background-color':'red' }); 

      // masonry
      $(function(){

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

      $container.imagesLoaded( function(){
      $container.masonry({
      itemSelector : '.box',
      gutterWidth: 8,
      columnWidth: 146
      });
    });

  });


});
}

// Start second IF statement
if (screen.width <= 1224 || winW <= 1224) {

    $(document).ready(function() {

      alert(2)

      Body.css({ 'background-color':'blue' }); 

      // masonry
      $(function(){

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

      $container.imagesLoaded( function(){
      $container.masonry({
      itemSelector : '.box',
      gutterWidth: 8,
      columnWidth: 113
    });
  });

});

});

}


}
$(document).ready(checkWidth);
$(document).resize(checkWidth);

編集 ===============

更新されたコード:

function checkWidth() {


 var winW = $(window).width();
 var Body = $('body');

 alert(0)

 if (screen.width >= 1225 || winW >= 1225) {


    alert(1)

    Body.css({ 'background-color':'red' }); 

    // masonry


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

    $container.imagesLoaded( function(){
      $container.masonry({
       itemSelector : '.box',
       gutterWidth: 8,
       columnWidth: 146
    });
 });

}

// Start second IF statement
if (screen.width <= 1224 || winW <= 1224) {

   alert(2)
   Body.css({ 'background-color':'blue' });

   // masonry


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

   $container.imagesLoaded( function(){
      $container.masonry({
      itemSelector : '.box',
      gutterWidth: 8,
      columnWidth: 113
   });
 });

}
}

$(document).ready(checkWidth);
$(document).resize(checkWidth);
4

1 に答える 1

0

ウィンドウのサイズが変更された後、関数で新しいイベント リスナーを追加しないでください。ユーザーがウィンドウのサイズを変更した瞬間に、関数 ( ) を呼び出します。これにより、DOM の準備ができたときにコードを起動する$(document).resize(checkWidth);別のイベント リスナー ( ) が不必要に作成されます (ただし、既に準備が整っている必要があります)。$(document).ready(function() {...

それを修正してみてください (つまり、そのイベント ハンドラーを削除し、そこにコードを配置するだけです)。

編集：

$(document).ready(function() {句からコードを取り出す必要があります。$(function(){さらに、( == ) の直後に別の DOM 対応イベント ハンドラーがあります$(document).ready(function() {。したがって、コードは次のようになります。

if (screen.width >= 1225 || winW >= 1225) {
    // No $(document).ready here
    alert(1)
    Body.css({ 'background-color':'red' });

    // No $(function(){ here
    var $container = $('#container');

    $container.imagesLoaded( function(){
        $container.masonry({
        itemSelector : '.box',
        gutterWidth: 8,
        columnWidth: 146
    });
}

2 番目の if ステートメントでも同じことを行います。

于 2012-02-08T11:27:43.373 に答える