相信做設(shè)計(jì)的朋友肯定都知道dribbble.com，它是一個(gè)非常棒的設(shè)計(jì)師分享作品的網(wǎng)站，全世界數(shù)以萬計(jì)的設(shè)計(jì)高手和行家都在這個(gè)網(wǎng)站上分享自己的作品，當(dāng)然，如果你常在上面閑逛的話，經(jīng)常得到一些免費(fèi)的好東西。
在今天的這篇jQuery教程中，我們將使用jQuery的幾個(gè)插件來開發(fā)一個(gè)響應(yīng)式的瀑布流應(yīng)用，這個(gè)應(yīng)用可以幫助你實(shí)時(shí)的從dribbble上得到最流行的設(shè)計(jì)作品，我們將使用如下幾個(gè)插件：
•isotope ： 一個(gè)魔術(shù)布局插件，可以幫助你構(gòu)建瀑布流的頁面布局方式（注意不免費(fèi)的哦）
•Jribbble ：一個(gè)幫助你方便調(diào)用dribbble API的jQuery插件
•imagesloaded：一個(gè)幫助你預(yù)先加載圖片的jQuery插件
第一步：使用jribbble來取得最受歡迎的dribbble設(shè)計(jì)內(nèi)容
首先呢，我們需要使用jribbble來取得最受歡迎的設(shè)計(jì)作品，代碼如下：
$.jribbble.getShotsByList（“popular”， function（data）{
$.each（data.shots， function （i， shot） {
/* 這里我們?nèi)〉胐ribbble中的作品，注意我們得到所有的“最受歡迎”作品列表 */
}）;
}，
{page： pagenum， per_page： 10}）;
使用以上代碼，我們可以分頁取得dribbble的最新設(shè)計(jì)，這里我們提供 pagenum 和 per_page參數(shù)，分別代碼當(dāng)前頁和每頁顯示作品數(shù)。
在$.each方法中的callback方法中，我們可以獲取相關(guān)的數(shù)據(jù)，然后將數(shù)據(jù)組織成我們需要生成的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”>設(shè)計(jì)師：<a href=“’ + shot.player.url + ‘”>’ + shot.player.name + ‘</a></div></article>’）;
}）;
在以上代碼中，我們生成了每一個(gè)設(shè)計(jì)作品的內(nèi)容，可以看到我們可以獲取作品的標(biāo)題，設(shè)計(jì)者，作品地址等等。
第二步：使用isotope來生成一個(gè)瀑布流布局效果
上面我們得到了需要展示的內(nèi)容，接下來我們將內(nèi)容添加在瀑布流展示的容器中。
注意：如果你在瀑布流布局中使用比較大的圖片的話，經(jīng)常會(huì)發(fā)現(xiàn)元素有互相疊加的問題，這是因?yàn)閳D片加載過慢，所以在圖片加載完畢之前isotope就完成了布局定位，為了解決這個(gè)問題，你需要將圖片預(yù)先加載
以下代碼生成一個(gè)瀑布流布局對象：
$wallcontent.isotope（{
itemSelector ： ‘article’
}）;
接下來我們將上面取得的設(shè)計(jì)作品添加到這個(gè)瀑布流對象中，代碼如下：
var newEls = items.join（‘’）;
var testcontent = $（newEls）;
$wallcontent.append（testcontent）;
$wallcontent.imagesLoaded（function（）{
$wallcontent.isotope（‘appended’， testcontent）.isotope（‘reLayout’）;
$showmore.text（‘更多設(shè)計(jì) （More）。..’）.bind（‘click’， loadshots）;
}）;
我們將第一步生成的設(shè)計(jì)項(xiàng)目使用appended方法添加到isotope中，并且重新布局。這樣就生成了一個(gè)動(dòng)態(tài)瀑布流的布局效果。
第三步：一些錦上添花的功能
這里我們?yōu)榱烁玫挠脩趔w驗(yàn)，添加了一個(gè)back to top的功能按鈕，當(dāng)用戶瀏覽很多頁的設(shè)計(jì)作品后，可以方便的滾動(dòng)到頂端。代碼如下：
$（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’）;
}
}
全部代碼書寫完畢！以上就是一個(gè)使用jQuery插件開發(fā)的響應(yīng)式的dribbble作品集魔術(shù)布局展示效果.
via gbtags
來源：超酷的響應(yīng)式dribbble設(shè)計(jì)作品瀑布流布局效果