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

标签: Javascript dribbble jquery 瀑布流 | 发表时间:2013-03-01 04:57 | 作者:terry
分享到:
出处:http://www.qianduan.net

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

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

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

先看下 在线演示

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

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

1
2
3
4
5
6
$.jribbble.getShotsByList("popular", function(data){
	$.each(data.shots, function (i, shot) {        
           /* 这里我们取得dribbble中的作品,注意我们得到所有的“最受欢迎”作品列表 */        
        });			
}, 
{page: pagenum, per_page: 10});

使用以上代码,我们可以分页取得dribbble的最新设计,这里我们提供 pagenum 和 per_page参数,分别代码当前页和每页显示作品数。

在$.each方法中的callback方法中,我们可以获取相关的数据,然后将数据组织成我们需要生成的html页面元素,代码如下:

1
2
3
4
5
6
7
8
9
10
var items = [];$.each(data.shots, function (i, shot) {
items.push('<article>');
items.push('<div><h2>' + shot.title + '</h2></div>');
items.push('<a href="' + shot.url + '" target="_blank">');
items.push('<img src="' + shot.image_teaser_url + '" alt="' + shot.title + '">');
items.push('</a>');
items.push('
<div>设计师:<a href="' + shot.player.url + '">' + shot.player.name + '</a></div></article>
');
});

在以上代码中,我们生成了每一个设计作品的内容,可以看到我们可以获取作品的标题,设计者,作品地址等等。

第二步:使用isotope来生成一个瀑布流布局效果

上面我们得到了需要展示的内容,接下来我们将内容添加在瀑布流展示的容器中。

注意:如果你在瀑布流布局中使用比较大的图片的话,经常会发现元素有互相叠加的问题,这是因为图片加载过慢,所以在图片加载完毕之前isotope就完成了布局定位,为了解决这个问题,你需要将图片预先加载

以下代码生成一个瀑布流布局对象:

1
2
3
$wallcontent.isotope({
	itemSelector : 'article'
});

接下来我们将上面取得的设计作品添加到这个瀑布流对象中,代码如下:

1
2
3
4
5
6
7
8
var newEls = items.join('');
 
var testcontent = $(newEls);
$wallcontent.append(testcontent);
$wallcontent.imagesLoaded(function(){	
	$wallcontent.isotope('appended', testcontent).isotope('reLayout');
	$showmore.text('更多设计 (More)...').bind('click', loadshots);
});

我们将第一步生成的设计项目使用appended方法添加到isotope中,并且重新布局。这样就生成了一个动态瀑布流的布局效果。

第三步:一些锦上添花的功能

这里我们为了更好的用户体验,添加了一个back to top的功能按钮,当用户浏览很多页的设计作品后,可以方便的滚动到顶端。代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
$(function(){
	$('body').append('&lt;div id="backtotop"&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;');
	initGoToTop();
});
 
function initGoToTop() {
	var orig_scroll_height = jQuery("#footer").position().top - jQuery(window).height() - 200;
 
	// fade in #top_button
	jQuery(function () {
		jQuery(window).scroll(function () {
			//console.log(jQuery(this).scrollTop());
			if (jQuery(this).scrollTop() &gt; 100) {
				jQuery('#backtotop').addClass('showme');
			} else {
				jQuery('#backtotop').removeClass('showme');
			}
		});
 
		// scroll body to 0px on click
		jQuery('#backtotop').click(function () {
			jQuery('body,html').animate({
				scrollTop: 0
			},  400);
			return false;
		});
	});
 
	if (jQuery(window).scrollTop() == 0) {
		jQuery('#backtotop').removeClass('showme');
	}else{
		jQuery('#backtotop').addClass('showme');
	}
}

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

全部代码书写完毕!以上就是一个使用jQuery插件开发的响应式的dribbble作品集魔术布局展示效果,如果你有任何问题和建议,请在我的 极客社区主页给我留言!希望大家喜欢!

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

相关 [响应式 dribbble 设计] 推荐:

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

- - 前端观察
相信做设计的朋友肯定都知道 dribbble.com,它是一个非常棒的设计师分享作品的网站,全世界数以万计的设计高手和行家都在这个网站上分享自己的作品,当然,如果你常在上面闲逛的话,经常得到一些免费的好东西. 在今天的这篇jQuery教程中,我们将使用jQuery的几个插件来开发一个响应式的瀑布流应用,这个应用可以帮助你实时的从dribbble上得到最流行的设计作品,我们将使用如下几个插件:.

响应式Web设计

- - 葵中剑's Blog - SwordAir.com
响应式Web设计( Responsive Web Design – RWD)一般是指那些使用CSS3 Media Query特性制作站点,其可以适应不同视窗尺寸的布局. 虽然很早就已经有了类似RWD的概念,但直到最近一年里才开始变得特别流行,各种文章、例子、工具、模板,不断地从无到有,诸如:. 响应式Web设计50个例子和最佳实践.

响应式网页设计

- - 前端观察
这个话题最近很火爆,我也一直在关注,响应式网页设计和移动互联网密切相关,并因移动终端的丰富和普及而兴盛,并且是一个颇具争议的话题,我今天将和大家探讨下. 上周写了个简单的ppt在组内大概介绍了下,感兴趣的话可以 先看下这个PPT. 在说到这个话题前,我们先看下网页设计和前端开发的现状:. 全球有超过53亿手机用户(包括传统手机).

响应式Web设计

- - 阿里巴巴(中国站)用户体验设计部博客
在设计中经常遇到这几个问题:. 1.想要网站兼容手机、平板电脑、pc,就得为不同的设备定制不同的版本. 2.想要网站的某些页面在宽屏显示器下一行显示更多的内容,又得为宽屏定制一个版本. 3.很多人并不是在全屏的情况下浏览我们的页面,如果让页面随着浏览器宽度改变而相应的调整会不会比较好. 有没有办法能有效解决这些问题呢.

响应式网页设计

- - IT技术博客大学习
响应式网页设计最初是由 Ethan Marcotte 提出的一个概念:为什么一定要为每个用户群各自打造一套设计和开发方案. Web设计应该做到根据不同设备环境自动响应及调整. 当然响应式Web设计不仅仅是关于屏幕分辨率自适应以及自动缩放的图片等等,它更像是一种对于设计的全新思维模式;我们应当向下兼容、移动优先.

漫谈响应式设计

- - 新浪UED
学究一些,首先大家先了解一下响应,然后再讲一下设计,响应就是我发出的请求能得到什么样子的回复,比如我说“你好”,你会很容易的给我回复“你好”,因为大家都是中国人,如果我说“hello”,我们这代人如果上过初中,他也会给我说“Hello”,但是如果我给对你说“Bonjour”,那可能只有高配的人才可能知道了.

淘宝响应式WebUI设计实践

- - Taobao UED Team
感谢贷岩的邀请,我在本期奶茶会上做了“响应式设计实践”的分享,是接着上一次的话题进一步讨论“如何实现”. 响应式Web设计(Responsive Web design)是当下比较流行的话题,什么是响应式设计. 简单讲,页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整.

Screenqueri.es:响应式设计测试工具

- - 我爱水煮鱼
当你创建一个响应式的布局的时候,在绝大部分流行的分辨率的设备上进行测试是非常重要的,这可以让你决定页面上的每块是否现实或者优化它们的显示方式. 今天给大家介绍的 Screenqueri.es 就是一个免费的基于 Web 的响应式设计的测试工具,它能够让你输入一个网址,然后选择移动或者平板设备,然后对你的网站在各个分辨率下进行测试.

非响应式设计的viewport

- - 前端观察
整理自: Viewport Meta Tag For Non-Responsive Design. 中文原文: 非响应式设计的viewport. 请尊重版权,转载请注明来源,多谢~~. 大家已经非常熟悉 响应式网页设计了吧,但是我们通常会忽略很多旧的没有采用响应式设计的网站,其实这类网站在移动终端的用户体验更为关键——因为它们没有对移动设备做任何优化.

响应式网页设计示例

- - CSDN博客推荐文章
若要全方位测试你自己或别人的响应式网站,则需要针对每一种设备和不同的屏幕尺寸,分别准备不同的测试系统. 尽管这是最完美的办法,但通过改变浏览器窗口大小其实就可以完成大多数测试. 除此之外,还有很多第三方插件和浏览器扩展可供选择,通过它们可以将当前浏览器窗口或视口设定为指定像素. 必要时,还可以自动将当前浏览器窗口或视口切换成为默认大小(如1024×768像素).