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. 要素が固定サイズの場合は、liCSSを介してそれらに寸法を指定し、それらをisotope取得します。

Answer 2

jqueryで修正しました：

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

これは、ページ全体が読み込まれるのを待ってから、最後に isotope スクリプトを読み込みます。以下に、すべてが読み込まれるまで「動作中」の通知とスピナーを使用して、より完全なソリューションを示します。スピナーは 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で見ることができます。