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;
完畢，可以測試了。