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

2022-03-08 16:41:13 字數 1344 閱讀 2030

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

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

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