0

Isotope JSの並べ替えと画像の配置を使用していますが、ページが読み込まれるときを除いて、すべての画像が読み込まれるまでスクリプトが実行されないことを除けば、正常に機能しています。Isotope JSヘルプページには、高値と幅の値を指定すると、画像を読み込まずにアイテムを配置するために必要な情報がスクリプトに提供されると記載されています。私はこれを行いましたが、スクリプトはまだすべての画像がロードされた後にのみトリガーされます。私はJSコーディングに慣れていないので、見逃していたものを見つけようとしていました。

<script src="js/jquery.isotope.min.js"></script> 


    $(window).load(function(){
        $('#container').isotope({
                itemSelector : '.item'
            });
        });

        var $container = $('#container');

        $('.filters a').click(function(){
            var selector = $(this).attr('data-filter');
            $container.isotope({ filter: selector });
            return false;
        });

        $('#options').find('.option-set a').click(function(){
        var $this = $(this);
            // don't proceed if already selected
            if ( !$this.hasClass('selected') ) {
                $this.parents('.option-set').find('.selected').removeClass('selected');
                $this.addClass('selected');
            }


        });

$（window）.load（function（）{$（'＃container'）。isotope（{itemSelector：'.item'}）;}）; var $ container = $（'＃container'）; $（'。filtersa'）。click（function（）{varセレクター= $（this）.attr（'data-filter'）; $ container.isotope（{filter：selector}）; return false;}）; $（'＃options'）。find（'。option-seta'）。click（function（）{var $ this = $（this）; //すでに選択されている場合は続行しないif（！$ this.hasClass （'selected'））{$ this.parents（'。option-set'）。find（'。selected'）。removeClass（'selected'）; $ this.addClass（'selected' ）; }}）; 
<script> 


    $(window).load(function(){
        $('#container').isotope({
                itemSelector : '.item'
            });
        });

        var $container = $('#container');

        $('.filters a').click(function(){
            var selector = $(this).attr('data-filter');
            $container.isotope({ filter: selector });
            return false;
        });

        $('#options').find('.option-set a').click(function(){
        var $this = $(this);
            // don't proceed if already selected
            if ( !$this.hasClass('selected') ) {
                $this.parents('.option-set').find('.selected').removeClass('selected');
                $this.addClass('selected');
            }


        });

4

2 に答える 2

1

インラインの高さと幅を指定する必要がありますが、コードは imagesLoaded プラグインが load() イベントを発生させた場合にのみ実行されます。

次のように、 jQuery の ready() 関数によってトリガーされるようにコードを変更する必要があります。

$(document).ready(handler)

それ以外の

$(window).load(handler)

Isotope に含まれる imagesLoaded プラグインの詳細については、こちらを参照してください。

于 2012-03-20T11:35:43.430 に答える
0

プラグインの作成者自身が「これは、Isotope がすべてのアイテムをレイアウトする前にアイテムの正確な幅を知る必要があるためです」と書いています。div のアニメーション展開を元に戻す使用している画像が大きすぎるか、多すぎるか、またはその両方ではないでしょうか。Web サイトの同等の画像ではなく、元のサイズの画像を含むフォルダーに誤ってリンクすると、同じ問題が発生しました。

于 2011-09-10T20:24:19.173 に答える