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

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

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

编辑：

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

对第二个 if 语句执行相同的操作。

于 2012-02-08T11:27:43.373 回答