响应式的无限滚动全屏dribbble作品集布局展示效果

来源：GBin1.com

在线演示/下载

大家还记得前面分享过的两个魔术布局效果吧：

响应式的dribbble作品集魔术布局展示效果

宽度自适应缩进的响应式dribbble作品集魔术布局展示效果

今天分享一个使用jQuery sly插件构建的全屏响应式布局布局效果，支持无限滚动。

相关插件：

Jribbble ：一个帮助你方便调用dribbble API的jQuery插件
Sly：一个帮助你生成水平方向滚动效果的jQuery插件

主要Javascript代码：

    var options = {
            scrollBy: 200,
            speed: 200,
            easing: 'easeOutQuart',
            scrollBar: '#scrollbar',
            dynamicHandle: 1,
            dragHandle: 1,
            clickBar: 1,
            mouseDragging: 1,
            touchDragging: 1,
            releaseSwing: 1
        };
        var frame = new Sly('#frame', options);

        
        frame.on('load change', function () {
            if (this.pos.dest > this.pos.end - 200) {
            
                $.jribbble.getShotsByList("popular", function(data){
                    var output=[];
                    $.each(data.shots, function (i, shot) {
                        output.push('<figure style="background-image: url(' + shot.image_teaser_url  + '?' + i + ')">');
                        output.push('<figcaption>');
                        output.push('<h4>' + shot.title + '</h4>');
                        output.push('<p><a target="_blank" href="' + shot.player.url  + '">' + shot.player.url + '</a></p>');
                        output.push('</figcaption>');
                        output.push('</figure>');
                    });    
                    
                    $images.append(output.join(''));
                    
                    pagenum++;
                    
                    frame.reload();
                    
                },
                {page: pagenum, per_page: 20}); 
                
            }
        }); 
        
        frame.init();

    // Reload on resize
    $(window).on('resize', function () {
        frame.reload();
    });