砌體不適用於moblie瀏覽器（chrome），並且僅當我重新加載（ctrl + f5）頁面而不是刷新（f5）時才可在Chrome桌面版本上使用

Question

Masonry在moblie瀏覽器（chrome）上不起作用，並且在刷新（f5）的Chrome中不起作用。 如果我在任何其他瀏覽器中加載頁面，或者在不使用其緩存（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 -->
<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 ready事件。

對於我來說，為什么在整頁重新加載（ctrl + f5）而不是刷新（f5）上起作用，這是一個謎