砌体在移动浏览器(chrome）上不起作用，并且仅在Chrome桌面版本上有效，如果我重新加载(ctrl + f5）页面

Masonry doesn't work on moblie browser (chrome) and only works on Chrome desktop version if I reload (ctrl+f5) the page, not on refresh (f5)

本文关键字：新加载 如果 f5 ctrl 有效 加载 页面 chrome 浏览器 移动 不起作用      更新时间：2023-09-26

Masonry在Mooblie浏览器（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 也会出现这个问题

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

我正在使用 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 -->
<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） 是一个谜

相关文章：