同位素折叠(元素重叠)

时间:2012-12-19 19:20:14

标签: jquery filter jquery-isotope overlap fold

我一直在阅读堆栈溢出的解决方案,但找不到它。

enter image description here http://i.imgur.com/hrcDg.png 的全尺寸图片)

当我加载页面时,它看起来像

这是网站(测试版)

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

如果你按 所有 它会展开,也许我可以解决它,如果它在开始时自动展开

3 个答案:

答案 0 :(得分:22)

问题在于,当您运行.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会将它们拾取..

答案 1 :(得分:1)

我用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

看到我的工作示例

答案 2 :(得分:0)

我们使用

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

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

代替您可以使用:

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

一切正常。