[Original] waterfall web page implementation design solution 1: Masonry (including load

Design Solution 1 of waterfall stream web page implementation: Masonry (with several loading pages) waterfall stream design has long been nothing new, currently, web pages based on waterfall stream are very common on the Internet. This design can give browsers a more direct and efficient browsing experience. So how can we achieve this effect through the combination of the front-end and back-end?

Design Solution 1 of waterfall stream web page implementation: Masonry (with several loading pages) waterfall stream design has long been nothing new, currently, web pages based on waterfall stream are very common on the Internet. This design can give browsers a more direct and efficient browsing experience. So how can we achieve this effect through the combination of the front-end and back-end?

Waterfall stream web page implementation solution 1: Masonry (including several loading pages)

Waterfall stream design has long been nothing new. Currently, web pages based on waterfall stream are very common on the Internet. This design can give browsers more direct and efficient browsing experience.
So how can we achieve this effect through the combination of the front-end and back-end?

In fact, there are already many waterfall plug-ins Based on jquery or original javascript. We only need to use them according to the api, which can be a good waterfall web page.
But in these plug-ins, the compatibility is good and the function is not bad. The following two types of plug-ins are introduced:
1. Masonry
2. KISSY
The following describes the implementation methods of these two waterfall stream modes. This article only describes Masonry and KISSY will be updated in the next article.

Requirement: waterfall stream output. After five loading times, a page is displayed. Each loading contains 12 contents.

Although jquery is not required, we should use jquery for convenience.

The following example is based on phpcms

Download jquery. min. js and masonry. pkgd. min. js by yourself.

I. html code:

# Content {min-height: 390px; width: 920px; }# content a {text-decoration: none ;}# page_loading {display: none; background: #111111; opacity: 0.7; height: 60px; width: 220px; padding: 10px; text-align: center;} # thumbs {position: relative; width: 895px; padding: 10px 0 20px 15px ;} # thumbs a {color: #26ADF5 ;}. imgbox {opacity: 0; position: absolute; max-width: 260px; margin: 5px 5px 5px 5px;-moz-border-radius: 6px;-webkit-border-radius: 6px; border-radius: 6px; border: 1px solid # EEE;-webkit-box-shadow: 0 0 6px # EEE;-moz-box-shadow: 0 0 6px # EEE; padding: 1px; float: left; background: # FFF; z-index: 100 ;}. imgbox img {display: block; padding: 6px; max-width: 250px ;}. imgbox. img_user {display: block; color: #26ADF5; padding: 3px 6px 2px 6px ;}. imgbox. img_time {display: block; color: # AAA; padding: 3px 6px 5px 6px; float: left ;}# page_nav {clear: both; height: 25px; width: 920px; font-size: 12pt; text-align: center ;}. page_nav {margin: 0 auto; text-align: left; overflow: hidden ;}. page_nav a {display: block; padding-top: 4px; margin-right: 10px; float: left ;}. page_nav_but {color: #26ADF5 ;}. current {color: #26ADF5; margin-top:-4px; font-size: 16pt; }# next_page {display: none ;}# stopfetch {display: none; width: 100px; height: 100px; position: fixed; top: 48%; right: 8%; background: url (.. /images/stopfetch.png) no-repeat ;}# stopfetch img {opacity: 0 ;}
         
 {Loop $ datas $ r}
 {$ R ['desc']} @ "itemprop =" datePublished ">
 ? #5 {/loop} next page
 Loading force ...... // Loading 5 times, pagination! Var loading_times = 5; // several times after waterfall and loading, page implementation will appear $ (function () {$ ("'.imgbox'detail .css ({display: 'none '}); $ ("# thumbs. imgbox "mirror.css ({opacity: 1}); // Fluid layout var $ container =$ ('# thumbs'); $ container. imagesLoaded (function () {$ container. masonry ({columnWidth: 279, itemSelector :'. imgbox '}); $ ('. imgbox '). show () ;}); var request, nextHref =$ ("# next_page "). attr ("href"); $ (window ). bind ("scroll", function () {If ($ (document). scrollTop () + $ (window). height ()> $ (document). height ()-10) {if (nextHref! = Undefined) {if (request & request. readyState! = 4) {request. abort ();} // Ajax waterfall loading request = $. ajax ({url: $ ("# next_page "). attr ("href"), type: "POST", beforeSend: function () {$ ("# page_loading "). show ("slow") ;}, success: function (data) {result = $ (data ). find (". imgbox "); nextHref = $ (data ). find ("# next_page "). attr ("href"); newNav = $ (data ). find ("# page_nav"); $ ("# next_page "). attr ("href", nextHref); $ ("# page_nav "). remove (); $ container. afte R (newNav); $ ("# thumbs "). append (result); // re-calculate. page_nav bandwidth so that margin: 0 auto takes effect $ page_navwidth = $ (". page_nav "). children (). length * 23; $ (". page_nav "detail .css ({opacity: 0, width: $ page_navwidth}); $ newElems = result; $ newElems. imagesLoaded (function () {$ container. masonry ('append', $ newElems, true); // gradually display new content $ newElems. animate ({opacity: 1}); $ ("# stopfetch "). show ("slow"); $ ("# page_loading "). hide ("slow "); }); // Number of loading times on the current page sub_page = $ (data ). find ("# sub_page" ).html ()-1; // current page current_page = $ (data ). find ("# current_page" ).html (); // total number of pages total_page = $ (data ). find ("# total_page" ).html (); if (sub_page> = loading_times | sub_page + loading_times * (current_page-1)> = total_page) {if ($ ('. pager '). length = 0) {$ ("# content "). append ("" + $ (data ). find ("# page_str" ).html () + '');} $ (window ). unbind ('scroll '); $ ("# page_loading "). hide (); Return ;}}) ;}else {$ ("# page_loading span"). text ("here's the wood, the last page! "); $ (" # Page_loading "). show ("fast"); setTimeout ("$ ('# page_loading '). hide () ", 1000); setTimeout (" $ ('# page_loading '). remove () ", 1100) ;}}) ;}; (function ($) {var $ backEle = $ ('. backToTop '); $ backEle. click (function () {$ ("html, body "). animate ({scrollTop: 0}, 120) ;}) $ backTOfuc = function () {var st = $ (document ). scrollTop (); var winH =$ (window ). height (); (st> 188 )? $ BackEle. show (): $ backEle. hide (); if (! Window. XMLHttpRequest) implements callback backele.css ("top", st + winH-166); }}$ (window ). bind ("scroll. backToTop ", $ backTOfuc); $ (function () {$ backTOfuc () ;}) ;}( window. jQuery)

Ii. php code:/lists-ajax1-{$catid}-{$page0000-2-12.html
The four parameters here correspond to: $ _ GET ['catid'], $ _ GET ['page'], $ _ GET ['sub _ page'], $ _ GET ['limit']

...... // Loading 5 times, pagination! $ Loading_times = 5; $ sub_page = (int) $ _ GET ['sub _ page']; $ page_c = $ sub_page; $ page = (int) $ _ GET ['page']; if ($ page = 0) {$ page = 1;} $ sub_page = $ sub_page + ($ page-1) * $ loading_times; $ limit = (int) $ _ GET ['limit']; $ SQL = "..... "; // here, The result array is queried based on the specific SQL statement. Please write it according to your system. $ Datas = getRowset ($ SQL, 'a. id asc ', $ sub_page, $ limit, 10, $ urlrule); // The returned result array should contain: // 1. loading page of the current page: $ sub_page, 2. total number of records: total_count, 3. total number of pages: total_pages, 4. result array datas $ result ['STAT'] = 'OK'; $ result ['photos'] ['page'] = $ sub_page; $ result ['photos'] ['pages '] = $ datas ['total _ page']; $ result ['photos'] ['perpage'] = $ limit; $ result ['photos'] ['Total'] = $ datas ['total _ count']; $ result ['photos'] ['photo '] = $ datas ['datas']; // This Returns the str of the paging code. Note the $ limit * $ loading_times parameter $ datas_tmp = getRowset ($ SQL, 'a. id asc ', $ page, $ limit * $ loading_times, 10, $ urlrule ); $ result ['photos'] ['pages _ str'] = $ datas_tmp ['pages _ str']; // The following is the string returned for assembly! $ Str = ''; foreach ($ result ['photos'] ['photo'] as $ k => $ r) {$ str. = "". $ r ['desc']. "@". date ('Y-m-d H: I: s', $ r ['inputtime']). "" ;}$ page_c ++; $ str. = "next page {$ page_c} {$ page }". $ result ["'photos'] ['pages ']. "". $ result ['photos'] ['pages _ str']. ""; echo $ str; die;

The test is complete.

Original article address: [original] waterfall web page implementation design solution 1: Masonry (including loading several times after the page appears, thank you for sharing.