同位素折叠（元素重叠）

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>

等待整个页面加载，然后最后加载同位素脚本。下面，我有一个更完整的解决方案，使用“工作”通知和微调器，直到所有内容都被加载。微调器来自font-awesome图标......

<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);
});

一切正常。