同位素過濾 - 僅在加載時出現異常間距

我正在對使用同位素過濾的PHP網站進行一些維護，並且我仍在學習Javascript。因此，我無法弄清楚如何解決同位素問題。同位素過濾 - 僅在加載時出現異常間距

我有兩個單獨的部分中有40個瓷磚的頁面。其中一個部分工作正常，沒有錯誤。但在第二部分，當我加載頁面時，它將最後的10-12個拼貼顯示在彼此之上（它看起來隨機變化）。

但是，無論何時點擊任何過濾器，它都能正常工作，並將它們推送到適當的間距。所以，這個問題只是在頁面初始加載期間的行爲。

有誰知道什麼可能會導致這類問題？

來源

2014-06-30 bluemoon6790

很難說沒有看到任何代碼，但我猜你是不是等待圖像使用前裝載Iosotope。這將意味着同位素可以爲你的元素計算錯誤的高度。看到這裏http://isotope.metafizzy.co/appendix.html – Turnip

謝謝你的答覆，我想比任何我需要幫助找出從哪裏開始尋找。這使我比我更接近。這是絕對錯誤的計算圖片之間的距離，我可以告訴。一旦我測試了您的鏈接建議的修復程序，我會更新此內容。 – bluemoon6790

看起來像你的圖像沒有得到加載，因爲他們精確地計算你的位置，沒有圖像加載意味着它沒有寬度和高度，這是爲什麼它是彼此ontop的原因，你可以使用檢查圖像加載或當doc.ready – vico

嘗試更改document.ready至window.load，這將使它在運行同位素之前等待圖像下載。

$(document).ready(function() { 
    // executes when HTML-Document is loaded and DOM is ready 
    $.isotope(); 
}); 

$(window).load(function() { 
    // executes when complete page is fully loaded, including all frames, objects and images 
$.isotope(); 
});

其實，閱讀發佈的鏈接3rror404，你可以做

// layout Isotope again after all images have loaded 
$container.imagesLoaded(function() { 
    $container.isotope('layout'); 
});

來源

2014-06-30 18:52:03 dave

這讓我指出了正確的方向。這基本上是我需要的，我只是不確定如何實現它，但我想我會最終弄清楚它。 – bluemoon6790

同位素過濾 - 僅在加載時出現異常間距

回答

相關問題