Super Cool response dribbble Design Works waterfall Flow layout effect

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

Online Demo: gbin1.com/gb/share/360.htm

I believe that the design of the friends must know dribbble.com, it is a very good designer to share the work of the site, tens of thousands of designers around the world and experts in this site to share their work, of course, if you often hang on the top, often get some free good things.

In today's jquery tutorial, we'll use several of the jquery plug-ins to develop a responsive waterfall stream application that will help you get the most popular designs from dribbble in real time, and we'll use the following plugins:

Isotope: a magic layout plugin that can help you build a waterfall Flow page layout (pay attention to not free OH)

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

imagesloaded: A jquery plugin that helps you preload a picture

The first step: use Jribbble to get the most popular dribbble design content

First, we need to use jribbble to get the most popular design work, the code is as follows:

$.jribbble.getshotsbylist ("Popular", function (data) {$.each (data.shots, function (i, shot) {/* Here we get the works in Dribbble, Note that we have all the "most popular" work listings/}); }, {page:pagenum, per_page:10});

Using the above code, we can pagination to get the latest design of dribbble, where we provide pagenum and per_page parameters, respectively, the current page of the code and the number of works per page display.

In the callback method in the $.each method, we can get the relevant data and then organize the data into the HTML page elements we need to generate, the code reads as follows:

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" > Designer: <a href= "' + Shot.player.url + '" > ' + shot.player.name + ' </a>< /div></article> '); });

In the above code, we generate the content of each design work, we can see that we can get the title of the work, designers, work address and so on.

Step two: Use isotope to generate a waterfall flow layout effect

We got what we needed to show, and then we added the content to the container in the waterfall display.

Note: If you use a larger picture in a waterfall layout, you will often find that the elements overlap with each other because the picture is too slow to load, so the isotope completes the layout before the picture is loaded, and in order to solve the problem, you need to preload the picture.

The following code generates a waterfall flow layout object:

$wallcontent. Isotope ({itemselector: ' aspires '});

Next we add the design work that was made to this waterfall stream object, and the code is as follows:

var newels = Items.join ('); var testcontent = $ (newels); $wallcontent. Append (testcontent); $wallcontent. imagesloaded (function () {$wallcontent. Isotope (' appended ', testcontent). Isotope (' relayout '); Showmore.text (' more design (more) ... '). bind (' click ', Loadshots); });

We add the design project generated in the first step to the isotope using the appended method and rearrange it. This creates a dynamic waterfall flow layout effect.

Step three: Some icing on the cake

Here we have added a function button to the top in order to have a better user experience, when the user browses many pages of design work, can easily scroll to the tip. The code is as follows:

$ (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 ()--//FAD E in #top_button jquery (function () {jquery (window). Scroll (function () {//console.log (jquery (). scrolltop ()); if (JQ Uery (This). ScrollTop () > () {jquery (' #backtotop '). addclass (' ShowMe ');} else {jquery (' #backtotop '). Removeclass ( ' ShowMe '); } }); Scroll 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 ');}

All code written! The above is a response to use the jquery plugin development of the Dribbble magic Layout display effect, if you have any questions and suggestions, please send me a message in my Geek Community homepage! I hope you like it!

Via Gbtags

Date: 2013-2-21 Source: gbin1.com

Super Cool response dribbble Design Works waterfall Flow layout effect