砌体和 JQuery 重新加载

Question

我在一个项目中使用 http://masonry.desandro.com 的 Masonry，我试图为我的用户创建时间线效果。

我想每隔一段时间自动刷新一次页面（10 秒用于测试目的），但遇到了问题。在第一次加载时，它调用 getStatus() 函数，页面加载完美。但 10 秒后，数据重新加载，砌体被破坏。

我想我尝试了所有关于何时调用和调用库的组合，但似乎没有任何效果。任何想法如何让砌体每次都使用重新加载的内容。当新数据（即 HTML）被传递到页面时，基本上正确地重建自身？我知道我做错了，但这是我的脚本块中的内容。

<script>
container = document.querySelector('#timeline-list');
        msnry = new Masonry( container, {
            // options
            columnWidth: '.col-sm-6',
            itemSelector: '.col-sm-6'
        });
        function getStatus() {
            $.getJSON('/community/get_status', function(data) {
                $('div#timeline-list').html(data.content);
                    msnry = new Masonry( container, {
                        // options
                        columnWidth: '.col-sm-6',
                        itemSelector: '.col-sm-6'
                    });
            });


            setTimeout("getStatus()",10000);
        }

        jQuery(window).load(function(){
            getStatus();
            if(jQuery(window).width() <= 640 ){
            msnry.destroy();
        }

            // check on resize
            jQuery(window).resize(function(){
                if(jQuery(this).width() <= 640 )
                    msnry.destroy();
            });

        });
    </script>

reload 函数返回 HTML 中的所有 col-sm-6 div 和数据。

我尝试过 .layout 和 .reloadedItems ，但它们似乎都不起作用（或者它告诉我的存在。有什么想法吗？谢谢！

Answer 1

你能说得更具体些吗？ 也许你需要使用ImagesLoaded Masonry

如果我没记错的话，现在它是一个单独的库Images Loaded Source