thinkPHP实现瀑布流的方法
发布时间：2020-12-13 02:13:29 所属栏目：PHP教程 来源：网络整理
导读：《：thinkPHP实现瀑布流的方法》要点： 本文介绍了：thinkPHP实现瀑布流的方法，希望对您有用。如果有疑问，可以联系我们。 PHP应用 本篇章节讲解thinkPHP实现瀑布流的办法.供大家参考研究.具体分析如下： 很多人都想做瀑布流的效果,这里告诉大家官
|
《：thinkPHP实现瀑布流的方法》要点： PHP应用本篇章节讲解thinkPHP实现瀑布流的办法.分享给大家供大家参考.具体分析如下： 很多人都想做瀑布流的效果,这里告诉大家官网使用的办法,首先要下载瀑布流的插件jquery.masonry.min.js 地址：http://masonry.desandro.com/index.html里面包含的很多示例. 流程: 1. 页面初始化时,调用插件进行一次排版； 2. 当用户将滚动条拖到底部时,用ajax加载一次数据,并排版显示 3. 重复2,直到无数据 Html代码:
代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">?
<html xmlns="http://www.w3.org/1999/xhtml">? <head>? <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">? <title>Insert title here</title>? <!--样式-->? <style type="text/css">? body {margin:40px auto; width:800px; font-size:12px; color:#666;}? .item{? border: 1px solid #D4D4D4;? color: red;? margin: 0 10px 10px 0;? padding: 10px;? position: relative;? width: 200px;? }? .loading-wrap{? bottom: 50px;? width: 100%;? height: 52px;? text-align: center;? display: none;? }? .loading {? padding: 10px 10px 10px 52px;? height: 32px;? line-height: 28px;? color: #FFF;? font-size: 20px;? border-radius: 5px;? background: 10px center rgba(0,.7);? }? .footer{? border: 2px solid #D4D4D4;? }? </style>? <!--样式-->? </head>? <body>? <!--引入所需要的jquery和插件-->? <script type="text/javascript" src="/test/public/Js/jquery-1.7.2.min.js"></script>? <script type="text/javascript" src="/test/public/Js/jquery.masonry.min.js"></script>? <!--引入所需要的jquery和插件-->? <!--瀑布流-->? <div id="container" class=" container">? <!--这里通过设置每个div不同的高度,来凸显布局的效果-->? <volist name="height" id="vo">? <div class="item" style="height:{$vo}px;">瀑布流下来了</div>? <input type="hidden" name="last_id" class="last_id" value="{$vo.id}"/>? </volist>? </div>? <!--瀑布流-->? <!--加载中-->? <div id="loading" class="loading-wrap">? <span class="loading">加载中,请稍后...</span>? </div>? <!--加载中-->? <!--尾部-->? <div class="footer"><center>我是页脚</center></div>? <!--尾部-->? <script type="text/javascript">? //用于转换unix时间戳? function unix_to_datetime(unix)?? {? var now = new Date(parseInt(unix) * 1000);? return now.toLocaleString().replace(/年|月/g,"-").replace(/日/g," ");? }? $(function(){? //页面初始化时执行瀑布流? var $container = $('#container');? $container.masonry({? itemSelector : '.item',? isAnimated: true? });? //用户拖动滚动条,达到底部时ajax加载一次数据? var loading = $("#loading").data("on",false);//通过给loading这个div增加属性on,来判断执行一次ajax哀求? $(window).scroll(function(){? if(loading.data("on")) return;? if($(document).scrollTop() > $(document).height()-$(window).height()-$('.footer').height()){//页面拖到底部了? //加载更多数据? loading.data("on",true).fadeIn(); //在这里将on设为true来阻止继续的ajax哀求? ? //获取最后一个id? var lastid = $('.last_id:last').val();? $.get(? "getMore",//要跳转的页面? {lastid:lastid},//传值? function(data){? //获取到了数据data,后面用JS将数据新增到页面上? var getdata = data.data;? var html = "";? if($.isArray(getdata)){? $.each(data.data,function(i,item) {? html += "<div class="item" style="height:"+data[i]+"px;">瀑布又流下来了</div>";? });? var $newElems = $(html).css({ opacity: 0 }).appendTo($container);? $newElems.imagesLoaded(function(){? $newElems.animate({ opacity: 1 });? $container.masonry( 'appended',$newElems,true );?? });? //一次哀求完成,将on设为false,可以进行下一次的哀求? loading.data("on",false);? }? loading.fadeOut();? },? "json"? );? }? });? });? </script>? </body>? </html> Action代码：
代码如下:
//初始化的数据?
public function lists(){?? $data = D('Info')->order('id DESC')->limit(10)->select();? $this->assign('data',$data);? $this->display();? }? //获取一次哀求的数据? public function getMore(){?? //获取最后一个id? if(!emptyempty($_GET['lastid']))$map['id'] = array('lt',$_GET['lastid']);?? $data = D('Info')->where($map)->order('id DESC')->limit(10)->select();? $this->ajaxReturn($data);? } 注意:通过判断窗口是否滚动到页面底部来决定用ajax加载一次数据,如果不做处理,会一下子哀求很多次,所以,要使用条件来限制. 这里使用的是往一个元素上赋值 $("#loading").data("on",true);,在哀求期间判断是true则不继续哀求,然后在页面哀求完成后再赋值为false. 希望本文所述对大家的ThinkPHP框架程序设计有所赞助. 编程之家培训学院每天发布《：thinkPHP实现瀑布流的方法》等实战技能，PHP、MYSQL、LINUX、APP、JS,CSS全面培养人才。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |