waterfall 瀑布流网页实现的设计方案一：masonry（含loading几次后出现分页） 瀑布流设计早就不是什么新鲜的东西了，现在网上基于瀑布流的网页非常常见，这种设计能给浏览器者更直接更有效率的浏览体验。 那么我们可以如何从前端、后端配合去实现这种效果呢?
waterfall 瀑布流网页实现的设计方案一：masonry（含loading几次后出现分页）
瀑布流设计早就不是什么新鲜的东西了，现在网上基于瀑布流的网页非常常见，这种设计能给浏览器者更直接更有效率的浏览体验。
那么我们可以如何从前端、后端配合去实现这种效果呢?
其实目前已有很多基于jquery或原生态javascript的waterfall插件，我们只需要根据api进行运用，既可做到不错的瀑布流网页。
但是在这些插件中，做得兼容性好并且功能还不错的，首推下面两种：
1.masonry
2.kissy
下面一一解说下这两种瀑布流方式的实现方式。本文只说masonry，kissy将会在下一篇文章更新。
需求：瀑布流输出，loading 5 次后出现分页，每次loading 12个内容。
jquery虽然不是必须的，但是为了方便，我们还是用上jquery吧。
下面的例子基于phpcms
jquery.min.js 及 masonry.pkgd.min.js请自行下载。
一、html代码：
#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} 下一页 给力加载中……//loading 5 次，出现分页！var loading_times = 5;// waterfall与 loading 几次后出现分页实现$(function() { $('.imgbox').css({display: 'none'}); $(#thumbs .imgbox).css({ opacity: 1 }); // 流体布局 var $container = $('#thumbs'); $container.imagesloaded(function(){ $container.masonry({ columnwidth: 279, itemselector : '.imgbox' }); $('.imgbox').show(); }); var request, nexthref = $(#next_page a).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 a).attr(href), type: post, beforesend: function(){ $(#page_loading).show(slow); }, success: function(data) { result = $(data).find(.imgbox); nexthref = $(data).find(#next_page a).attr(href); newnav = $(data).find(#page_nav); $(#next_page a).attr(href, nexthref); $(#page_nav).remove(); $container.after(newnav); $(#thumbs).append(result); // 重新计算 .page_nav 的宽带，以便 margin: 0 auto 生效 $page_navwidth = $(.page_nav).children().length * 23; $(.page_nav).css({ opacity: 0, width: $page_navwidth }); $newelems = result; $newelems.imagesloaded(function(){ $container.masonry( 'appended', $newelems, true ); // 渐显新的内容 $newelems.animate({ opacity: 1 }); $(#stopfetch).show(slow); $(#page_loading).hide(slow); }); //当前页的loading次数 sub_page = $(data).find(#sub_page).html()-1; //当前页数 current_page = $(data).find(#current_page).html(); //总页数 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(木有了噢，最后一页了！); $(#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) { $backele.css(top, st + winh - 166); } } $(window).bind(scroll.backtotop, $backtofuc); $(function () { $backtofuc(); });})(window.jquery)
二、php端代码：/lists-ajax1-{$catid}-{$page}-2-12.html
这里的四个参数分别对应：$_get['catid'],$_get['page'],$_get['sub_page'],$_get['limit']
......//loading 5 次，出现分页！$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 = .....;//这里根据具体sql语句查询出结果数组，请根据自己的系统写好。$datas = getrowset($sql,' a.id asc ', $sub_page, $limit,10,$urlrule); //返回的结果数组应该包含：//1.当前页的loading page：$sub_page，2.总记录数：total_count，3.总页数：total_pages，4.结果数组 datas$result['stat']='ok';$result['photos']['page']=$sub_page;$result['photos']['pages']=$datas['total_pages'];$result['photos']['perpage']=$limit;$result['photos']['total']=$datas['total_count'];$result['photos']['photo']=$datas['datas'];//这里是获取分页代码的str，请注意这里的$limit*$loading_times 这个参数$datas_tmp = getrowset($sql,' a.id asc ', $page, $limit*$loading_times,10,$urlrule);$result['photos']['pages_str']=$datas_tmp['pages_str'];//下面是组装返回的字符串！供前端的js获取使用$str='';foreach($result['photos']['photo'] as $k=>$r) { $str.= .$r['desc'].@.date('y-m-d h:i:s',$r['inputtime']).;}$page_c++;$str.=下一页{$page_c}{$page}.$result['photos']['pages']..$result['photos']['pages_str'].;echo $str;die;
完毕，可以测试了。
原文地址：【原创】waterfall瀑布流网页实现的设计方案一：masonry（含loading几次后出现分页, 感谢原作者分享。