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

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

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

$.jribbble.getshotsbylist("popular", function
(data));            
}, );

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

var items = ;$.each(data.shots, function
(i, shot) );

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

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

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

以下**生成乙個瀑布流布局物件：

$wallcontent.isotope();

接下來我們將上面取得的設計作品新增到這個瀑布流物件中，**如下：

var newels = items.join('');
var testcontent =$(newels);
$wallcontent.imagesloaded(
function
());

這裡我們為了更好的使用者體驗，新增了乙個back to top的功能按鈕，當使用者瀏覽很多頁的設計作品後，可以方便的滾動到頂端。**如下：

$(function
());
function
initgototop()  
else
});//scroll body to 0px on click
jquery('#backtotop').click(function
() ,  400);
return
false
;        });
});if (jquery(window).scrolltop() == 0) 
else
}

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

相信做設計的朋友肯定都知道dribbble.com，它是乙個非常棒的設計師分享作品的全世界數以萬計的設計高手和行家都在這個上分享自己的作品，當然，如果你常在上面閒逛的話，經常得到一些免費的好東西。在今天的這篇jquery教程中，我們將使用jquery的幾個外掛程式來開發乙個響應式的瀑布流應用，這...

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

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

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

響應式的dribbble作品集魔術布局展示效果

相關推薦