同位摺疊（元素重疊）

Question

我一直在閱讀堆棧溢出的解決方案，但無法找到它。

（在http://i.imgur.com/hrcDg.png原圖）當我加載它看起來像

下面的頁面是網站（測試版）

http://e-gimnazija.hostoi.com/test/site/index.html

如果您按全部它展現，也許如果它自動展現在開始時，我可以解決這個問題

Answer 1

的問題是，當你運行.isotope圖像尚未加載，所以插件無法計算它們的大小..

你有一些不同的選項可供選擇

1. 已加載圖像之後開始同位素.. $(window).load(function(){/*init plugin here*/})
2. 使用imagesLoaded插件 ：http://isotope.metafizzy.co/docs/help.html#imagesloaded_plugin
3. 呼叫reLayout一旦圖像加載$(window).load(function(){$('#thumbs').isotope('reLayout');});
4. 如果li元素是固定的大小，然後給他們的尺寸，通過CSS和isotope將它們撿起來..

Answer 2

我用jQuery固定它：

<script type='text/javascript' > 
    $(window).load(function() { 
     $.getScript('/js/jquery.isotope.min.js', function() { }); 
    }); 
</script> 

這等待整個頁面被加載，然後加載同位素腳本。下面，我有一個更完整的解決方案，使用「工作」通知和微調，直到一切都被加載。該微調是從字體真棒圖標...

<div class="container wrapper"> 
    <div class="inner_content"> 
     <div class='working' > 
      <h2>working... <i class="icon-spinner icon-spin icon-large"></i></h2> 
     </div> 
    </div> 
</div> 

<script type='text/javascript' > 
    $(window).load(function() { 
     $.getScript('/js/jquery.isotope.min.js', function() { 
      $('.working').fadeOut(); 
     }); 
    }); 
</script> 

你可以看到我的工作例如：http://ericavhay.com/painting/portfolio