将想法与焦点和您一起共享

响应式dribbble设计作品之瀑布流布局效果发布者:本站     时间:2020-05-21 19:05:18

dribbble上得到最流行的设计作品,我们将使用如下几个插件:

•isotope : 一个魔术布局插件,可以帮助你构建瀑布流的页面布局方式(注意不免费的哦)

•Jribbble :一个帮助你方便调用dribbble API的jQuery插件

•imagesloaded:一个帮助你预先加载图片的jQuery插件

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

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

$.jribbble.getShotsByList(“popular”, function(data){

$.each(data.shots, function (i, shot) {

/* 这里我们取得dribbble中的作品,注意我们得到所有的“最受欢迎”作品列表 */

});

},

{page: pagenum, per_page: 10});

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

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

var items = [];$.each(data.shots, function (i, shot) {

items.push(‘<article>’);

items.push(‘<div class=“details”><h2>’ + shot.title + ‘</h2></div>’);

items.push(‘<a href=“’ + shot.url + ‘” target=“_blank” class=“linkc”>’);

items.push(‘<img src=“’ + shot.image_teaser_url + ‘” alt=“’ + shot.title + ‘”>’);

items.push(‘</a>’);

items.push(‘<div class=“author”>设计师:<a href=“’ + shot.player.url + ‘”>’ + shot.player.name + ‘</a></div></article>’);

});

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

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

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

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

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

$wallcontent.isotope({

itemSelector : ‘article’

});

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

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的功能按钮,当用户浏览很多页的设计作品后,可以方便的滚动到顶端。代码如下:

$(function(){

$(‘body’).append(‘<div id=“backtotop” class=“showme”><div class=“bttbg”></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’);

}

}



选择我们,优质服务,不容错过
1. 优秀的网络资源,强大的网站优化技术,稳定的网站和速度保证
2. 15年上海网站建设经验,优秀的技术和设计水平,更放心
3. 全程省心服务,不必担心自己不懂网络,更省心。
------------------------------------------------------------
24小时联系电话:021-58370032
关键词标签:上海网站建设 上海网站制作 网站优化 小程序开发