首页

关于

超酷的响应式dribbble设计作品瀑布流布局效果

超酷的响应式dribbble设计作品瀑布流布局效果

在线演示

相信做设计的朋友肯定都知道dribbble.com,它是一个非常棒的设计师分享作品的网站,全世界数以万计的设计高手和行家都在这个网站上分享自己的作品,当然,如果你常在上面闲逛的话,经常得到一些免费的好东西。

在今天的这篇jQuery教程中,我们将使用jQuery的几个插件来开发一个响应式的瀑布流应用,这个应用可以帮助你实时的从dribbble上得到最流行的设计作品,我们将使用如下几个插件:

  • isotope : 一个魔术布局插件,可以帮助你构建瀑布流的页面布局方式(注意不免费的哦)
  • Jribbble :一个帮助你方便调用dribbble API的jQuery插件
  • imagesloaded:一个帮助你预先加载图片的jQuery插件

第一步:使用jribbble来取得最受欢迎的dribbble设计内容

首先呢,我们需要使用jribbble来取得最受欢迎的设计作品,代码如下:

$.jribbble.getShotsByList("popular",…

标签: jQuery, jQuery插件, dribbble, 瀑布流布局

阅读更多

使用jQuery和CSS3来访问Dribbble的API

使用jQuery和CSS3来访问Dribbble的API

在线演示  本地下载

Dribbble是一个非常知名的设计社区,和其它大型社区类似,它也可以提供给你开放API来访问它的内容,在今天的这个教程中,我们将使用来自Dribbble的第三方API,生成一个最新设计作品展示页面,希望大家喜欢!

HTML代码

<div class="drib-list clearfix" id="popular">     
    <h1>Popular</h1>    
</div>

首先我们创建一个div,指定class为drib-list。然后当所有的dribbble内容都加载后,传递到预先定义的HTML结构中。

<div class="drib-item">
<div class="drib-image">
<a href="{url}"><img…

标签: dribbble, jquery, css3, dribbble api

阅读更多

标签

© Copywrite by gbin1.com, all rights reserved.