`

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

阅读更多

日期:2013-2-21  来源:GBin1.com

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

在线演示

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

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

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

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

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

.....

via gbtags

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

分享到:
评论

相关推荐

    微信小程序-dribbble.zip

    开发者可能需要从 dribbble 上下载或参考设计素材,然后使用 WXSS 来定义样式,WXML 来构建布局。 4. API 整合:如果这个压缩包包含了与 dribbble API 相关的代码或文档,那么开发者可以利用 dribbble 的公开 API ...

    仿Dribbble 的边栏菜单

    5. **响应式设计**:考虑到不同设备的屏幕尺寸,边栏菜单应具备响应式设计,确保在不同分辨率和纵横比的屏幕上都能正常显示。这可能需要使用`dimen`资源和`@dimen`引用来调整元素的大小和间距。 6. **自定义控件**...

    基于 Dribbble 设计实现的一个时间选择器.zip

    1. **自定义设计**:LFTimePicker遵循了Dribbble上的设计风格,具有独特的视觉效果和交互体验。这可能包括平滑的动画、清晰易读的时间显示以及吸引人的颜色搭配。 2. **灵活性**:作为一个自定义控件,LFTimePicker...

    基于dribbble设计的ReactNativeMarvel应用程序

    在本项目中,开发者参考了Dribbble上的设计作品,将这些富有创意的界面元素和布局融入到应用程序中,以提供用户友好的交互体验和吸引人的视觉效果。 3. **项目结构** - `react-native-marvel-app-master`:这是...

    Android代码-Dribbble设计师网站非官方客户端

    >Dribbble是一个优秀的设计师网站,这里有上万优秀设计师为移动开发人员提供了海量精美的UI资源。Dribbble很早就开放了API,也有许多优秀的第三方客户端,本着学习的目的,我在课余时间写了这个还很粗糙的客户端。...

    源代码:网站制作dribbble.rar

    用户可以借此学习Dribbble网站的页面布局、色彩搭配、响应式设计、交互效果等方面的知识。 在【标签】部分为空的情况下,我们可以推测这个资源可能涵盖了以下知识点: 1. **HTML结构**:Dribbble网站的源代码将...

    Android项目源码优秀的设计师网站Dribbble非官方开源客户端

    5. **UI/UX设计**:客户端界面应该与Dribbble的风格保持一致,同时提供良好的交互体验,这涉及Android的自定义View和动画效果。 6. **异步处理**:为了防止UI阻塞,数据加载和处理可能在后台线程进行,比如使用...

    微信小程序源码模版_dribbble.rar

    1. **页面布局**:Dribbble风格的模板通常注重简洁和优雅,因此在布局上可能会采用响应式设计,适应不同设备屏幕尺寸,同时保持内容的清晰与易读。 2. **色彩搭配**:Dribbble的设计趋势倾向于使用明亮、对比鲜明的...

    dribbble-01:练习在Dribbble上基于UixNinja的“大脑”设计构建响应式登录页面

    响应性着陆页 关于这个项目: ... UiX Ninja将原始设计称为“大脑”,并通过Flexbox和CSS Mixins响应了移动布局。 使用的技术: HTML CSS,PostCSS,Flexbox 古尔普 Webpack 浏览器同步 参考: 在上

    安卓进度条loadingprogress相关-android中很酷的progressbar又一个根据dribbble设计图实现的项目.rar

    Dribbble是一个设计师展示作品的社区,经常能看到许多创新和富有创意的UI设计,包括进度条。这个项目可能包含了将Dribbble上的概念转化为实际Android代码的过程,使得开发者能够为自己的应用添加更吸引人的视觉元素...

    Android-一个Dribbble的AndroidApp

    通过分析这个项目,开发者可以学习到如何构建一个具有完整功能的Android应用,包括UI设计原则、响应式布局、网络请求处理、数据缓存策略、状态管理以及Android最佳实践。同时,这也可能是一个展示如何将Dribbble API...

    微信小程序-dribbble源码

    Dribbble设计作品通常包含丰富的视觉效果,因此在小程序中重现这些效果需要使用到微信小程序的动画API,如wx.createAnimation。同时,良好的用户体验还需要考虑触摸事件和手势识别,实现滑动切换、点击交互等功能。...

    高仿dribbble小程序源码.zip

    7. **响应式布局**:运用WXSS实现自适应屏幕尺寸的布局。 8. **状态管理**:如果项目较大,可能涉及到状态管理方案,如Redux或MobX的微型版实现。 9. **图片处理**:学习如何优化和加载图片资源,提高用户体验。 10....

    微信小程序源代码模板-dribbble、FlexLayout布局、gank、HIapp、IT-EBOOK等.zip

    本资源包含一系列微信小程序的源代码模板,涵盖了不同的应用场景和技术点,如设计灵感、响应式布局、实用工具和在线阅读等。 1. **dribbble**: 这个模板可能与Dribbble,一个设计师分享作品的社区相关。它可能...

    小程序源码dribbble.zip

    - 为了模仿Dribbble网站的界面和功能,源码中可能包含了一些特定的组件和样式,如卡片式设计展示、滑动效果、评论系统等。开发者需要对微信小程序的组件库和自定义组件有深入了解,以实现良好的用户体验。 7. **...

    Dribbble开源

    Dribbble是一个设计师社区,平面设计师,创意工作者等,都可以在上面分享他们的作品。作品既为Shot,作者为Player 资源有Eclipse版和Android studio 两个版本,studio版本要好点 Dribbble是感谢作者Github ...

    Android代码-设计网站Dribbble安卓客户端

    A Dribbble App by Android Architecture 2016.6.5 增加数据中间层对象: Resource, 用于判断数据结果状态:Success,Loading, Error; 分页请求bug:当结果成功或失败的时候,一定要removeObserver(), 防止...

    Android-大致实现了一个之前在Dribbble上看到的一个登陆注册的设计

    Dribbble是一个设计师分享创意作品的平台,所以这个项目可能是开发者根据在Dribbble上找到的灵感进行的实践。 在Android开发中,创建吸引人的、用户体验良好的登录和注册界面是至关重要的,因为这是用户首次接触...

    ios-已上架的Dribbble客户端.zip

    Dribbble是一个设计师社区,用户可以分享他们的设计作品和反馈。这个压缩包包含了已经成功在苹果App Store上架的Dribbble iOS客户端源代码。 【描述】中的"已上架的Dribbble客户端"意味着这个项目不仅是一个概念或...

    dribbble微信小程序源码

    7. **布局与动画**:为了实现良好的用户体验,源码中可能包含复杂的布局设计和动画效果,这需要开发者对CSS布局和微信小程序的动画API有深入理解。 8. **版权问题**:由于涉及到dribbble的内容,源码作者提醒,使用...

Global site tag (gtag.js) - Google Analytics