Isotope folded (elements overlap)

核能气质少年 提交于 2020-07-16 16:28:34

问题


I have been reading stack overflow for a solution but can't find it.

enter image description here (full size image at http://i.imgur.com/hrcDg.png)

When I load the page it looks like that

Here is the site (beta)

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

If you press all it unfolds, maybe I can solve it if it auto unfolds at the start


回答1:


The problem is that when you run .isotope the images are not yet loaded, so the plugin cannot calculate their size..

You have some different options to choose from

  1. Start isotope after the images have loaded.. $(window).load(function(){/*init plugin here*/})
  2. Use the imagesLoaded plugin: http://isotope.metafizzy.co/docs/help.html#imagesloaded_plugin
  3. call reLayout once the images are loaded $(window).load(function(){$('#thumbs').isotope('reLayout');});
  4. if the li elements are fixed size, then give them dimensions through CSS, and isotope will pick them up..



回答2:


I fixed it with jquery:

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

This waits for the whole page to be loaded, then loads the isotope script last. Below, I have a more complete solution, using a "working" notification and a spinner until everything gets loaded. The spinner is from font-awesome icons...

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

You can see my working example at: http://ericavhay.com/painting/portfolio




回答3:


While we use

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

function it's throwing an Uncaught TypeError: $ is not a function

Instead of you can use:

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

It's working fine.



来源:https://stackoverflow.com/questions/13959579/isotope-folded-elements-overlap

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!