砌體插件無法在Chrome中工作

Question

我最近對構建網站感興趣，但仍然很缺乏經驗，所以如果這很容易回答，我很抱歉。

我被一個朋友問她建立了一個簡單的時裝設計作品集網站。因此，該網站主要有圖像庫。圖像有各種大小，而不是手動排序，使它看起來更好，我找到了砌體插件。我實現masonry.pkgd.min.js到我的代碼（通過HTML初始化），跑進兩個問題：

1. 的主要問題，可能使問題2完全沒有實際意義......它看起來罰款在IE和Firefox，但圖像在Chrome中出現重疊，看起來很可怕。我清理了幾次緩存，並試圖實現imagesLoaded插件，它完全沒有。我對JavaScript非常陌生，因此必須依賴複製/粘貼這種插件，而其他人可能能夠深入並調整它，但同時我也沒有問題獲取標籤內容，這樣做在兩個瀏覽器中工作。任何想法爲什麼它不能在Chrome中工作，我可以做些什麼來解決它？

2. 插件後，我似乎沒有任何控制權自動居中在圖庫/容器中的圖像列，他們左對齊本質。我或多或少地通過手動設置餘裕來解決這個問題，將所有東西放在正確的位置，但是想知道是否有更好的解決方案。

請讓我知道，如果我需要包括屏幕截圖或特定的代碼。

Answer 1

問題一：

嘗試增加imagesLoaded。如果您不使用磚石建築，Chrome尤其會遇到問題。我建議首先在第三個盒子中嘗試解決方案，這是最簡單和最快的加載。如果您有.js文件，則該代碼將放入您的.js文件中，如果不存在，則放入您的腳本標記中。

如果「爲什麼」您感興趣，這是因爲您的容器在您的照片之前加載並且不知道它們應該有多高。

問題二：

你說得對與這一個。您不能將整個砌體容器本身居中（您可以靠近，但在某些瀏覽器寬度處右側會有一個小溝槽），但您可以通過添加邊距來像圖中那樣將圖像居中放置在容器中：

position: relative; 
margin-right: auto; 
margin-left: auto;