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

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() { ）。因此您的代码应如下所示：

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语句执行相同的操作。