砌體網格未加載

Question

我有點掙扎–網站的磚石網格在第一次訪問該頁面時沒有加載（只有在我再次刷新時才加載嗎？）網格中的所有圖像都加載良好，只是腳本未運行。

您可以在此網站的主頁上查看它： http : //moniquewilmoth.com

Answer 1

您的網頁正在加載多個版本的jquery（通過googleapis-cdn的3.1.0，從本地服務器的3.1.1，從cloudflare-CDN的2.2.0）和兩個版本的砌體（從本地服務器的4.1.1和4.2.0 unpkg-CDN）。

我認為，這些不同的版本相互沖突並引起麻煩。 僅導入這些腳本的一個（最新）版本，它應該運行。

就我而言，Masonry通過在Win 10上的Chrome和Firefox上進行測試而運行，但IE和Edge失敗（但在重新加載頁面后又可以正常工作）。

如果您打算將本地回退用於CDN版本，請查看此處： 在CDN被阻止/不可用的情況下，如何將本地腳本文件作為回退加載？

Answer 2

一些問題。 您正在同時裝載同位素和砌體。 它們是獨立的庫。 同位素具有磚石結構，但不能一起使用。 刪除庫“ js / isotope-docs.min.js”，然后像這樣加載js文件：

<script src="js/jquery.min.js"></script>
<script src="js/masonry.pkgd.min.js"></script>
<script src="js/scripts.js"></script>

接下來，您要呼叫石工兩次，第二次呼叫未設置任何選項：

  var elem = document.querySelector('.grid'); 
  var msnry = new Masonry( elem, {
  // options
  itemSelector: '.grid-item',
  columnWidth: '.grid-width',
  stagger: 30,
  });

  // element argument can be a selector string
  //   for an individual element
  var msnry = new Masonry( '.grid', {
  // options
  });

將代碼更改為此：

 var elem = document.querySelector('.grid');
 var msnry = new Masonry( elem, {
 // options
 itemSelector: '.grid-item',
 columnWidth: '.grid-width',
  stagger: 30,
 });

第三，您是否應該考慮使用此處所述的 imagesloaded.js以避免圖像重疊。