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

当浏览器窗口或屏幕宽度低于某个数字时，我基本上是在尝试更改我的脚本布局。我希望它能够（实时）响应您更改浏览器宽度的情况，但此时它刚好中断。此外，由于某些原因，只有先加载的脚本才能工作。我已经测试过砌体的isResizable:true选项，但它没有得到我想要的效果。有人能提供解决方案吗？这是Mashise的页面，想知道是否有人可以帮助找到与此页面相关的解决方案：

这是我的密码：

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

函数checkWidth（）{
var winW=$（window.width（）；
变量Body=$（'Body'）；
警报（0）
如果（屏幕宽度>=1225 | winW>=1225）{
$（文档）.ready（函数（）{
警报（1）
css（{'background color'：'red'}）；
//砌石
$（函数（）{
var$container=$（“#container”）；
$container.imagesLoaded（函数（）{
$container.com({
itemSelector:“.box”，
排水沟宽度：8，
列宽：146
});
});
});
});
}
//启动第二个IF语句
如果（屏幕宽度=1225）{
警报（1）
css（{'background color'：'red'}）；
//砌石
var$container=$（“#container”）；
$container.imagesLoaded（函数（）{
$container.com({
itemSelector:“.box”，
排水沟宽度：8，
列宽：146
});
});
}
//启动第二个IF语句
如果（screen.width您的函数不应该在调整窗口大小后添加新的事件侦听器。当用户调整窗口大小时，您调用您的函数（
$（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语句执行相同的操作。
我将如何执行此操作？是否应删除行：$（文档）。调整大小（检查宽度）为这欢呼。我已经实现了这段代码，但现在当我调整浏览器大小时，它完全崩溃了。布局崩溃，而且当我点击“刷新”时，什么也不显示。我认为这是砌体插件的第二次调用，这是问题所在，说实话，不知道到底发生了什么。有指针吗？
$container.imagesLoaded（function（））{
似乎正在创建另一个事件处理程序（我不知道这个插件，但它的名称表明代码将在图像加载后运行）。因此无法保证代码会运行。你所说的“完全中断”是什么意思？如果您使用Google Chrome/Firebug，请查看控制台对任何错误的说明。此外，如果没有缩进，很难读取代码……让我们来看看
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
    });
}