jQuery的砌體/同位素和流體圖片：在窗口瞬間重疊調整

Question

我注意到，使用jQuery同位素或砌體與流體/響應網站時，這些元素同時被調整瀏覽器窗口暫時重疊。請參閱下面的圖片，這些是從this演示截圖。你也可以看到這發生在同位素website。

有沒有什麼可以做，以避免這種重疊？

Answer 1

同位素版本3使用：

$(window).resize(function(){ $('.grid').isotope('layout'); }); 

，以避免重疊網格物品。

Answer 2

感謝Osvaldas Valutis對他的博客（http://osvaldas.info/responsive-jquery-masonry-or-pinterest-style-layout）在回答這個問題。

-

砌體：

$(window).resize(function(){ $('#list').masonry('reload'); }); 

而對於我下面的作品，用同位素：

$(window).resize(function(){ $('#list').isotope('reLayout'); }); 

- 再次

謝謝，Osvaldas。

Answer 3

感謝您的上述評論...我得到了我的問題的答案在這裏，但我怎麼只是想解釋U-> 我使用同位素，所以我的代碼是 -

var $container = $('your main container in which your all item will get listed'); 
$container.imagesLoaded(function() { 
    $container.isotope({ 
     itemSelector: 'figure', 
     filter: '*', 
     resizable: false, 
     animationEngine: 'jquery' 
    }); 
}); 

使用AJAX頁面加載

後，當我打電話給我的AJAX應用調用這個函數

$("#filter-container").isotope('reLayout'); 

在第一頁的負荷會出現頁面上的一些數據，以便同位素將調整所有和附加AJAX加載數據同位素後會重新安排所有其中。