jquery - 同位素折叠（元素重叠）

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

Answer 3

当我们使用

jQuery(window).load(function($){});

函数它抛出一个Uncaught TypeError: $ is not a function

而不是你可以使用：

jQuery(document).ready(function ($) {
setTimeout(function(){ 
        //Isotope Code place here 
     }, 3000);
});

它工作正常。