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

1
2
3
4
5
6

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

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>
');
});

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);
});

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('<div id="backtotop"><div></div></div>');
	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() > 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');
	}
}