An infinite scrolling full screen dribbble display effect

Intermediary transaction http://www.aliyun.com/zixun/aggregation/6858.html ">seo diagnose Taobao guest cloud host technology Hall

Source: gbin1.com

Online demo and download

You can remember the two magic layout effects you shared earlier:

Response-style dribbble works set Magic layout display effect

Response type of width adaptive indentation dribbble Works set Magic layout display effect

Today share a Full-screen response layout effect built using the jquery Sly plug-in to support infinite scrolling.

Related plug-ins:

Jribbble: A jquery plugin to help you easily invoke the Dribbble API

Sly: A jquery plugin that helps you create horizontal scrolling effects

Main JavaScript code:

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", Fu Nction (data) {var output=[]; $.each (data.shots, function (i, shot) {Output.push ("); Output.push ("); Output.push ('

' + Shot.title + '

'); Output.push ('

' + Shot.player.url + '

'); Output.push ("); Output.push ("); }); $images. Append (Output.join); pagenum++; Frame.reload (); }, {page:pagenum, per_page:20}); } }); Frame.init (); Reload on resize $ (window). On (' Resize ', function () {frame.reload ();});

The specific code, please download and see for yourself.

Source: Responsive Infinite scrolling full screen dribbble work set layout show effect