在线演示    本地下载

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 src="{image}" alt="{title}" /></a>
    </div>
    <div class="drib-detail">
        <div class="drib-detail-wrapper">
            <a href="#">{title}</a>
            <ul>
                <li class="views">{views}</li>
                <li class="likes">{likes}</li>
                <li class="comments">{comments}</li>
            </ul>
        </div>
    </div>
</div>

CSS代码

以下为CSS代码：

body {
    font-family:arial;
    font-size:75%;
    margin:0 0 170px 0;
    padding:0;
    background: #2F2F2F;
    color: #C6C6C6;    
}
 
hr {
    -moz-box-shadow: rgba(255, 255, 255, 0.07) 0 1px 0;
    -webkit-box-shadow: rgba(255, 255, 255, 0.07) 0 1px 0;
    -o-box-shadow: rgba(255, 255, 255, 0.07) 0 1px 0;
    box-shadow: rgba(255, 255, 255, 0.07) 0 1px 0;
    border-bottom: 1px solid #121212;
    border-top: none;  
    margin: 18px 0;
    display:block;
}
 
h1 {
    font: 30px Tahoma, Helvetica, Arial, Sans-Serif;
    text-align: left;
    color: #555;
    text-shadow: 0px 2px 5px #111; 
    margin: 20px 0 10px 0; 
}
 
.drib-list {
    width: 1080px;
    margin:15px auto 0 auto;
    padding-left:10px;
}
 
.drib-item {
    width:200px;
    height:150px;
    border:5px solid #ccc;
    position:relative;
    overflow:hidden;
    border: 1px solid rgba(0, 0, 0, 0.05);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    box-shadow: rgba(255, 255, 255, 0.1) 0 1px 0, rgba(0, 0, 0, 0.8) 0 1px 7px 0px inset;
    background: #202020;
    background-color: rgba(0, 0, 0, 0.3);      
    margin-bottom:10px;
    float:left;
    margin-right:10px;
}
 
.drib-image,
.drib-detail {
    width:100%;
    position:absolute;
    left:0;
    
}
 
.drib-image {
    top:0; 
    z-index:10;
}
    
    .drib-image img {
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        border:0;  
    }      
 
.drib-detail {     
    z-index:0;
    height:50%;
    bottom:0;
    background:#333;
    -webkit-box-shadow: inset 0 0 10px 5px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: inset 0 0 10px 5px rgba(0, 0, 0, 0.5);
    box-shadow: inset 0 0 10px 5px rgba(0, 0, 0, 0.5);
}
 
    .drib-detail-wrapper {
        margin:14px 10px 0 10px;
    }
 
    .drib-detail a {
        color:#eee;
        font-weight:bold;
        display:block;
        text-decoration:none;
        font-size:110%;
    }  
    
    .drib-detail a:hover {
        color:#ffffff
    }  
        
    .drib-detail ul {
        margin:2px 0 0 0 ;
        padding:0;
        list-style:none;
    }  
    
    .drib-detail li {
        float:left;
        margin-right:5px;
        background:url('sprite.png') no-repeat 0 0;
        padding-left:24px;
        height:20px;
        line-height:22px
    }          
    
    .drib-detail li.comments {
        background-position: 0 0;      
    }          
 
    .drib-detail li.views {
        background-position: 0 -39px;      
    }          
 
    .drib-detail li.likes {
        background-position: 0 -79px;
    }                          
            
    /* new clearfix */
    .clearfix:after {
        visibility: hidden;
        display: block;
        font-size: 0;
        content: " ";
        clear: both;
        height: 0;
        }
    * html .clearfix             { zoom: 1; } /* IE6 */
    *:first-child+html .clearfix { zoom: 1; } /* IE7 */

Javascript代码

dribbble的API非常简单直接，这里我们使用这俩个：

1.http://api.dribbble.com/shots/{list}： 返回debuts， everyone， popular的发布。

2.http://api.dribbble.com/players/{id}/shots： 返回某个用户最近的发布。