【原创】waterfall瀑布流网页实现的设计方案一：Masonry（含load
- WBOYOriginal
- 2016-06-06 20:11:221411browse
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} <!-- 这里输出第一页的内容，请根据不同的语言套上相应标签，本例子基于phpcms -->
{$r['desc']}
@" itemprop="datePublished"><?php echo date('Y-m-d H:i:s',$r['inputtime']);?>?#5
{/loop}
下一页 <!-- 这里设置下一个loading的url地址，本例子基于phpcms -->
给力加载中……
//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几次后出现分页, 感谢原作者分享。
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：curl下载文件得到header和bodyNext article：分享我的CDN钩子函数