0

我试图让无限滚动与 Masonry 一起工作。

    +function ($) {

var $container = $('.masonry');

$container.imagesLoaded(function(){
    $container.masonry({
        columnWidth: '.grid-sizer',
        gutter: '.gutter-sizer',
        itemSelector: '.item'
    })
});

$container.infinitescroll({
    navSelector  : '#page-nav',    // selector for the paged navigation
    nextSelector : '#page-nav a',  // selector for the NEXT link (to page 2)
    itemSelector : '.item',     // selector for all items you'll retrieve
    loading: {
        finishedMsg: 'No more pages to load.',
        img: 'http://i.imgur.com/6RMhx.gif'
        }
    },
    // trigger Masonry as a callback
    function( newElements ) {
        // hide new items while they are loading
        var $newElems = $( newElements ).css({ opacity: 0 });
        // ensure that images load before adding to masonry layout
        $newElems.imagesLoaded(function(){
        // show elems now they're ready
        $newElems.animate({ opacity: 1 });
        $container.masonry( 'appended', $newElems, true );
        });
    }
);


}(jQuery);

似乎如果我删除 imagesLoaded 函数并只调用砌体，它会显示砌体的图像，但不会无限滚动。

因为它是我得到一个错误：

未捕获的类型错误：未定义不是函数

我正在使用 Foundation，并按以下顺序调用我的脚本：

@import 'vendor/masonry.pkgd.js';
@import 'vendor/jquery.infinitescroll.min.js';

@import 'scripts.js';

脚本包括我在开始时突出显示的代码。jQuery 版本是 2.0.3

4

1 回答 1

3

您将不得不添加imagesloaded库。

试试这个代码

    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-infinitescroll/2.0b2.120519/jquery.infinitescroll.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/masonry/3.1.2/masonry.pkgd.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.0.4/jquery.imagesloaded.min.js"></script>

    (function() {

    // Main content container
    var $container = $('.masonry');

    // Masonry + ImagesLoaded
    $container.imagesLoaded(function(){
        $container.masonry({
            // selector for entry content
             columnWidth: '.grid-sizer',
            gutter: '.gutter-sizer',
            itemSelector: '.item'
        });
    });

    // Infinite Scroll
    $container.infinitescroll({

        // selector for the paged navigation (it will be hidden)
        navSelector  : "#page-nav",
        // selector for the NEXT link (to page 2)
        nextSelector : "#page-nav a",
        // selector for all items you'll retrieve
        itemSelector : ".item",

        // finished message
        loading: {
             finishedMsg: 'No more pages to load.',
             img: 'http://i.imgur.com/6RMhx.gif'
            }
        },

        // Trigger Masonry as a callback
        function( newElements ) {
            // hide new items while they are loading
            var $newElems = $( newElements ).css({ opacity: 0 });
            // ensure that images load before adding to masonry layout
            $newElems.imagesLoaded(function(){
                // show elems now they're ready
                $newElems.animate({ opacity: 1 });
                $container.masonry( 'appended', $newElems, true );
            });

    });

    /**
     * OPTIONAL!
     * Load new pages by clicking a link
     */

    // Pause Infinite Scroll
    $(window).unbind('.infscr');

    // Resume Infinite Scroll
    $('.#page-nav a').click(function(){
        $container.infinitescroll('retrieve');
        return false;
    });
})();
于 2015-04-29T09:08:33.777 回答