超酷的響應式dribbble設計作品瀑布流布局效果

jjfat 11年前發布 | 8K 次閱讀 jQuery jQuery插件 dribbble 瀑布流布局

相信做設計的朋友肯定都知道dribbble.com，它是一個非常棒的設計師分享作品的網站，全世界數以萬計的設計高手和行家都在這個網站上分享自己的作品，當然，如果你常在上面閑逛的話，經常得到一些免費的好東西。

在今天的這篇jQuery教程中，我們將使用jQuery的幾個插件來開發一個響應式的瀑布流應用，這個應用可以幫助你實時的從dribbble上得到最流行的設計作品，我們將使用如下幾個插件：

isotope ：一個魔術布局插件，可以幫助你構建瀑布流的頁面布局方式（注意不免費的哦）
Jribbble ：一個幫助你方便調用dribbble API的jQuery插件
imagesloaded：一個幫助你預先加載圖片的jQuery插件

第一步：使用jribbble來取得最受歡迎的dribbble設計內容

首先呢，我們需要使用jribbble來取得最受歡迎的設計作品，代碼如下：

$.jribbble.getShotsByList("popular", function(data){
    $.each(data.shots, function (i, shot) {        
           /* 這里我們取得dribbble中的作品，注意我們得到所有的“最受歡迎”作品列表 */        
        });         
}, 
{page: pagenum, per_page: 10});

使用以上代碼，我們可以分頁取得dribbble的最新設計，這里我們提供 pagenum 和 per_page參數，分別代碼當前頁和每頁顯示作品數。

在$.each方法中的callback方法中，我們可以獲取相關的數據，然后將數據組織成我們需要生成的html頁面元素，代碼如下：

var items = [];$.each(data.shots, function (i, shot) {
    items.push('<article>');
    items.push('<div class="details"><h2>' + shot.title + '</h2></div>');
    items.push('<a href="' + shot.url + '" target="_blank" class="linkc">');
    items.push('<img src="' + shot.image_teaser_url + '" alt="' + shot.title + '">');
    items.push('</a>');
    items.push('<div class="author">設計師：<a href="' + shot.player.url + '">' + shot.player.name + '</a></div></article>');
});

在以上代碼中，我們生成了每一個設計作品的內容，可以看到我們可以獲取作品的標題，設計者，作品地址等等。

第二步：使用isotope來生成一個瀑布流布局效果

上面我們得到了需要展示的內容，接下來我們將內容添加在瀑布流展示的容器中。

注意：如果你在瀑布流布局中使用比較大的圖片的話，經常會發現元素有互相疊加的問題，這是因為圖片加載過慢，所以在圖片加載完畢之前isotope就完成了布局定位，為了解決這個問題，你需要將圖片預先加載

以下代碼生成一個瀑布流布局對象：

$wallcontent.isotope({
    itemSelector : 'article'
});

接下來我們將上面取得的設計作品添加到這個瀑布流對象中，代碼如下：

var newEls = items.join('');

var testcontent = $(newEls);
$wallcontent.append(testcontent);
$wallcontent.imagesLoaded(function(){   
    $wallcontent.isotope('appended', testcontent).isotope('reLayout');
    $showmore.text('更多設計 (More)...').bind('click', loadshots);
});

我們將第一步生成的設計項目使用appended方法添加到isotope中，并且重新布局。這樣就生成了一個動態瀑布流的布局效果。

第三步：一些錦上添花的功能

這里我們為了更好的用戶體驗，添加了一個back to top的功能按鈕，當用戶瀏覽很多頁的設計作品后，可以方便的滾動到頂端。代碼如下：

$(function(){
    $('body').append('<div id="backtotop" class="showme"><div class="bttbg"></div></div>');
    initGoToTop();
});

function initGoToTop() {
    var orig_scroll_height = jQuery("#footer").position().top - jQuery(window).height() - 200;

    // fade in #top_button
    jQuery(function () {
        jQuery(window).scroll(function () {
            //console.log(jQuery(this).scrollTop());
            if (jQuery(this).scrollTop() > 100) {
                jQuery('#backtotop').addClass('showme');
            } else {
                jQuery('#backtotop').removeClass('showme');
            }
        });

        // scroll body to 0px on click
        jQuery('#backtotop').click(function () {
            jQuery('body,html').animate({
                scrollTop: 0
            },  400);
            return false;
        });
    });

    if (jQuery(window).scrollTop() == 0) {
        jQuery('#backtotop').removeClass('showme');
    }else{
        jQuery('#backtotop').addClass('showme');
    }
}