0

私のJavaScriptは次のようになります：

    <script type="text/javascript">
        $(document).ready(function() {
            // isotope
            var $container = $('#content');
            $container.imagesLoaded( function(){
                $container.isotope({
                    filter: '*',
                    itemSelector : '.element',
                    getSortData : {
                        colors : function( $elem ) {
                            return $elem.find('.colors').text();
                        },
                        number : function( $elem ) {
                            return $elem.find('.number');
                        }
                    }
                });

                var $sortedItems = $container.data('isotope').$filteredAtoms;

                // filter items when filter link is clicked
                $('#filter a').click(function(){
                    alert("filter");
                    var selector = $(this).attr('data-filter');
                    $container.isotope({ filter: selector });
                    return false;
                });

                // sorting
                $('#sort a').click(function(){
                    var sortType = $(this).attr('data-sort');
                    $container.isotope({ sortBy : sortType });
                    return false;
                });
            });
        });

        function updateContent(path, args) {
            $.ajax({
                url: (path+args),
                type: "POST",
                success: function( data ){

                    $(allCards).remove();
                    $("#content").html( data );
                    $('#content').isotope( 'reLayout', callback );
                }
            });
        }

        function callback() {
            alert("success: "+$('#content').height());
        }
    </script>

updateContent() 関数を使用するたびに #content div の高さが 0 になります。コンテンツが完全に読み込まれておらず、次の画像セットが読み込まれる前に同位体が初期化されているために、競合状態が発生する可能性があると思います。

最初にドキュメントをロードすると、正常に動作します。ただし、updateContent() を使用して新しい画像セットを読み込むと、#content div の高さが 0 に設定されます。理想的には、新しい画像セットを読み込めるようにしたいのですが、アイソトープは通常どおり初期化され、高さは次のようになります。 #content div 内に収まるすべての画像の適切な値。

次の部分を修正する必要があり、これは私がこれまでに持っているものです...

$(allCards).remove(); // remove all previous images
$("#content").html( data ); // load new images
$('#content').isotope( 'reLayout', callback ); // <- reinit isotope to manage the new images

基本的に、以前の画像をすべて削除し、新しい画像をすべてデータにロードすると、アイソトープが新しい画像で機能するようになります。

4

2 に答える 2

0

http://isotope.metafizzy.co/docs/methods.htmlをご覧ください。

まず、 $("#content") に追加するマークアップに .element クラスがあることを確認してください。持っていない場合は、アイソトープ コンテナーに挿入する前に追加する必要があります。

次に、追加オブジェクトを削除するための組み込みの方法を使用してみてください

.isotope( 'addItems', $items, callback )

あなたの場合は次のようになります。

$("#content").isotope( 'remove', $(".element"), function(){
    $("#content").isotope( 'addItems', $(data), function(){
        $("#content").isotope( 'reLayout' callback );
    });
});

おそらく「remove」と「addItems」からのコールバックを利用する必要はありませんが、jsfiddle の例がないとわかりにくいです。

于 2013-10-21T04:34:24.463 に答える