響應式dribbble設計作品之瀑布流布局效果發(fā)布者：本站     時(shí)間：2020-05-21 19:05:18

dribbble上得到最流行的設計作品，我們將使用如下幾個(gè)插件：

?isotope ： 一個(gè)魔術(shù)布局插件，可以幫助你構建瀑布流的頁(yè)面布局方式（注意不免費的哦）

?Jribbble ：一個(gè)幫助你方便調用dribbble API的jQuery插件

?imagesloaded：一個(gè)幫助你預先加載圖片的jQuery插件

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

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

$.jribbble.getShotsByList（“popular”， function（data）{

$.each（data.shots， function （i， shot） {

/* 這里我們取得dribbble中的作品，注意我們得到所有的“最受歡迎”作品列表 */

}）;

}，

{page： pagenum， per_page： 10}）;

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

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

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=“l(fā)inkc”>’）;

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>’）;

}）;

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

第二步：使用isotope來(lái)生成一個(gè)瀑布流布局效果

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

注意：如果你在瀑布流布局中使用比較大的圖片的話(huà)，經(jīng)常會(huì )發(fā)現元素有互相疊加的問(wèn)題，這是因為圖片加載過(guò)慢，所以在圖片加載完畢之前isotope就完成了布局定位，為了解決這個(gè)問(wèn)題，你需要將圖片預先加載

以下代碼生成一個(gè)瀑布流布局對象：

$wallcontent.isotope（{

itemSelector ： ‘a(chǎn)rticle’

}）;

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

var newEls = items.join（‘’）;

var testcontent = $（newEls）;

$wallcontent.append（testcontent）;

$wallcontent.imagesLoaded（function（）{

$wallcontent.isotope（‘a(chǎn)ppended’， testcontent）.isotope（‘reLayout’）;

$showmore.text（‘更多設計 （More）。..’）.bind（‘click’， loadshots）;

}）;

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

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

這里我們?yōu)榱烁玫挠脩?hù)體驗，添加了一個(gè)back to top的功能按鈕，當用戶(hù)瀏覽很多頁(yè)的設計作品后，可以方便的滾動(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’）;

}

}