Question

当浏览器窗口或屏幕宽度低于某个数字时，我基本上是在尝试更改我的砌体脚本的布局。我希望它能够在您更改浏览器宽度时（实时）响应，但此刻它只是暂停。此外，由于某种原因，只有首先加载的脚本才有效。我已经测试了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);

Answer 1

在调整窗口大小后，您的函数不应添加新的事件侦听器。在用户调整窗口大小的那一刻，你调用你的函数（$(document).resize(checkWidth);）然后不必要地创建另一个事件监听器（$(document).ready(function() {...），当DOM准备好时它会激活你的代码（但是它应该已经准备好了））。

尝试修复它（即删除该事件处理程序并简单地将代码放在那里）。

编辑：

您需要从$(document).ready(function() {子句中取出代码。此外，在$(function(){ == $(document).ready(function() {之后，您还有另一个DOM就绪事件处理程序。所以你的代码应该是这样的：

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
    });
}

对你的第二个if语句做同样的事。

砌体：当找到新的屏幕宽度或窗口宽度时，如何更改columnWidth选项？

1 个答案: