Question

Masonry不能在moblie浏览器（chrome）上运行，并且在刷新时无法在Chrome中运行（f5）。如果我在任何其他浏览器中加载页面，或者如果我完全重新加载页面而不使用其缓存（ctrl + 5），它确实可以正常工作。它也不适用于jsfiddle。

我知道它应该有用，因为Masonry网站本身可以在这些浏览器上运行。

我正在使用网格大小容器来定义列宽，并且具有不同尺寸的图块：

    .project {
      width: $column_width;
    }

    .grid-sizer {
    width: $column_width;
  }

    .project.oneXtwo {
    width: $column_width;
    height: (2* $column_width);
    }

    .project.twoXone {
    width: (2* $column_width);
    height: $column_width;
    }

    .project.twoXtwo {
    width: (2* $column_width);
    height: (2* $column_width);
    }

在页面加载时启动砌体：

columnWidth = $(".project").width();
        $(".project").height(columnWidth);
        $(".twoXtwo").height(columnWidth * 2);
        $(".oneXtwo").height(columnWidth * 2);

        container.masonry({
          columnWidth: ".grid-sizer",
          itemSelector: '.project',
          isAnimated:true,
        });

以下是代码的jsfiddle：http://jsfiddle.net/BartBurg/BtKHL/ 注意：在jsfiddle中它也不适用于任何其他浏览器。

编辑：

如果我第二次访问网站（不是刷新/重新加载）重新加载页面，Firefox也会出现此问题

Answer 1

解决方案是牵强附会的，可能只会很少发生。

我正在使用scssphp来解析我的.SCSS文件服务器端。我在这件事中包含了我的SCSS和JS文件：

<!-- Javascript -->
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/masonry.pkgd.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>

<!-- Stylesheets -->
<link type="text/css" href="style.php/responsive.scss" rel="stylesheet" />

解决方案是在我添加任何Javascript之前包含Stylesheets：

<!-- Stylesheets -->
<link type="text/css" href="style.php/responsive.scss" rel="stylesheet" />

<!-- Javascript -->
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/masonry.pkgd.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>

这很有趣，因为我在jQuery.ready（）上启动了砌体：

$( function() {
    ...
    initMasonry(container);
});

function initMasonry(container){
    ...
    container.masonry({
      columnWidth: ".grid-sizer",
      itemSelector: '.project',
          isAnimated:true
    });
    ...
}

如果我用生成的.css样式表替换样式表，砌体也会按预期工作。

我的猜测是，当Chrome和Firefox看到所有带有* .js和* .css的行都正确加载并且不会等待待处理的* .scss文件时，它们都会激活DOM就绪事件。

对我来说，为什么这适用于整页重新加载（ctrl + f5）而不是刷新（f5）

，这是一个谜。

Masonry不适用于移动浏览器（chrome），只适用于Chrome桌面版本，如果我重新加载（ctrl + f5）页面，而不是刷新（f5）

1 个答案: