來源：GBin1.com

在線演示/下載

大家還記得前面分享過的兩個魔術布局效果吧：

• 響應式的dribbble作品集魔術布局展示效果

• 寬度自適應縮進的響應式dribbble作品集魔術布局展示效果

今天分享一個使用jQuery sly插件構建的全屏響應式布局布局效果，支持無限滾動。

相關插件：

• Jribbble ：一個幫助你方便調用dribbble?API的jQuery插件
• Sly：一個幫助你生成水平方向滾動效果的jQuery插件

主要Javascript代碼：

var options = {scrollBy: 200,speed: 200,easing: 'easeOutQuart',scrollBar: '#scrollbar',dynamicHandle: 1,dragHandle: 1,clickBar: 1,mouseDragging: 1,touchDragging: 1,releaseSwing: 1};var frame = new Sly('#frame', options);frame.on('load change', function () {if (this.pos.dest > this.pos.end - 200) {$.jribbble.getShotsByList("popular", function(data){var output=[];$.each(data.shots, function (i, shot) {output.push('<figure style="background-image: url(' + shot.image_teaser_url + '?' + i + ')">');output.push('<figcaption>');output.push('<h4>' + shot.title + '</h4>');output.push('<p><a target="_blank" href="' + shot.player.url + '">' + shot.player.url + '</a></p>');output.push('</figcaption>');output.push('</figure>');}); $images.append(output.join(''));pagenum++;frame.reload();},{page: pagenum, per_page: 20}); }}); frame.init();// Reload on resize$(window).on('resize', function () {frame.reload();});

具體代碼，請大家下載后自行查看。

來源：響應式的無限滾動全屏dribbble作品集布局展示效果

轉載于:https://www.cnblogs.com/gbin1/archive/2013/05/30/3108193.html

總結

以上是生活随笔為你收集整理的响应式的无限滚动全屏dribbble作品集布局展示效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。