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

3

我通过前置解决了这个问题。我提出这个是为了让人们不必像我一样受苦。

$("#content").isotope( 'remove', $(".element"), function(){
    $("#content").prepend($(data)).isotope( 'reloadItems' ).isotope({ sortBy: 'original-order' });
});
于 2013-10-23T02:22:07.140 回答
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 回答