小编alx*_*xvo的帖子

结合砌体,imagesLoaded与ajax功能

我正在制作一个网站,其中所有内部链接使当前页面淡出并且新页面淡入.这对我来说非常有用.问题是我正在尝试将它与伟大的砌体插件结合起来.在第一个页面加载砌体确实有效,但我似乎无法弄清楚如何通过ajax重新激活新加载的内容上的砌体.我应该补充一下,当前砌体中的所有项目都会被删除,然后被新的替换.

砌体代码是这样的:

    $container = $('#container');

    $container.imagesLoaded(function(){ 
        $container.masonry({
           itemSelector: '.item',
           transitionDuration: 0
        }); 
    });
Run Code Online (Sandbox Code Playgroud)

而ajax加载代码是这样的:

    var newHash      = "",
        $mainContent = $("#ajaxcontainer"),
        $ajaxSpinner = $("#loader"),
        $el;

    $('.internal').each(function() {
        $(this).attr("href", "#" + this.pathname);
    }); 

    $(document).on('click', '.internal', function() {

        window.location.hash = $(this).attr("href");

    });

    $(window).bind('hashchange', function(){

        newHash = window.location.hash.substring(1);

        if (newHash) {
            $mainContent.fadeOut(500, function() {

                $ajaxSpinner.fadeIn();
                $mainContent.load(newHash + " #container", function() {
                    $ajaxSpinner.fadeOut( function() {
                        $mainContent.fadeIn(1000);
                    });
                    $('.internal').each(function() {
                        $(this).attr("href", "#" + this.pathname);
                    });        
                });

            });
        };

    });

    $(window).trigger('hashchange');
Run Code Online (Sandbox Code Playgroud)

有没有人有任何关于如何实现这一目标的意见?非常感谢你.

javascript ajax jquery jquery-masonry

1
推荐指数
1
解决办法
2196
查看次数

标签 统计

ajax ×1

javascript ×1

jquery ×1

jquery-masonry ×1