Awesome responsive dribbble Design Works waterfall stream layout Effect

 

Online demonstration: gbin1.com/gb/#/360.htm

I believe all the design friends know about dribbble.com. It is a very good website for designers to share works. Tens of thousands of design experts and experts around the world share their works on this website. Of course, if you are always hanging out, you will often get free things.

In today's jQuery tutorial, we will use several jQuery plug-ins to develop a responsive waterfall stream application, this application can help you get the most popular designs from dribbble in real time. We will use the following plug-ins:

Isotope: A magic layout plug-in that helps you build the page layout of waterfall streams (note that it is not free)

Jribbble: A jQuery plug-in that helps you easily call dribbble APIs

Imagesloaded: A jQuery plug-in that helps you pre-load images

Step 1: Use jribbble to get the most popular dribbble design content

First, we need to use jribbble to get the most popular design. The Code is as follows:

$. Jribbble. getShotsByList ("popular", function (data) {$. each (data. shots, function (I, shot) {/* Here we get the files in dribbble. Note that we get the list of all "Most Popular" files */});}, {page: pagenum, per_page: 10 });

With the above code, we can get the latest dribbble design by page. Here we provide the pagenum and per_page parameters, respectively, code the current page and the number of entries displayed on each page.

In the callback method of the $. each method, we can obtain the relevant data and organize the data into html page elements that we need to generate. The Code is as follows:

Var items = []; $. each (data. shots, function (I, shot) {items. push ('<article>'); items. push ('<div class = "details">

In the above Code, we have generated the content of each design file. We can see that we can obtain the title, designer, and address of the file.

Step 2: Use isotope to generate a waterfall flow Layout

As shown above, we can add the content to the waterfall stream display container.

Note: If you use large images in the waterfall stream layout, you will often find that elements overlap with each other because the image loading is too slow, therefore, isotope completes layout positioning before the image is loaded. To solve this problem, you need to pre-load the image

The following code generates a waterfall flow layout object:

$ Wallcontent. isotope ({itemSelector: 'Article '});

Next, add the design work obtained above to the waterfall Stream object. The Code is as follows:

Var newEls = items. join (''); var testcontent =$ (newEls); $ wallcontent. append (testcontent); $ wallcontent. imagesLoaded (function () {$ wallcontent. isotope ('append', testcontent ). isotope ('relayout '); $ showmore. text ('more designs (More )... '). bind ('click', loadshots );});

We add the design project generated in step 1 to isotope using the appended method and re-layout it. In this way, the layout of a dynamic waterfall flow is generated.

Step 3: some icing on the cake Functions

Here we add a back-to-top button for better user experience. When users browse design works on many pages, they can easily scroll to the top. The Code is as follows:

$ (Function () {$ ('body '). append ('<div id = "backtotop" class = "showme"> <div class = "bttbg"> </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 ');}}

　　

 

All code is written! The above is a responsive dribbble portfolio developed using the jQuery plug-in for magic layout display. If you have any questions or suggestions, please leave a message on the homepage of my geeks community! Hope you like it!

Via gbtags

Date: 2013-2-21 Source: gbin1.