传统瀑布流布局ul-li，需要先设定显示几列，每列是一个li，需要左浮动并指定宽度，li里面的布局也要先布局好，主要是要定宽，高度自动；然后通过ajax异步，从数据库中得到数据，遍历后将数据插入最矮的li中
HTML中的代码：
<!--定义JS中需要的数据-->
<script type="text/javascript"> var ajaxHandle='<{:U("Index/Typeshow/ajax","","")}>'; //这个是JS提交AJAX数据的后台方法的地址 var link='<{:U("Index/Show/index","","")}>'; //这个是AJAX返回给HTML数据中链接需要用到的地址 var type=1; //定义类型：Android，iPhone，windowsphone，other var page=1; //初始化页数 </script>
<!-- 瀑布流形式显示，使用ajax异步；每个li是一列，通过判断li的高度决定插入数据到哪个li里面-->
<div id='content'> <ul> <li> <!--这里的数据都从ajax异步获取 <dl> <dt><{$v['title']}></dt> <dd><{$v['intro']}></dd> </dl> --> </li> <li></li> <li></li> </ul> </div>
CSS中的代码
#content{ margin:10px; } #content li{ float:left; width:300px; margin:13px; } #content dl{ background:white; -webkit-box-shadow: #666 0px 0px 5px; -moz-box-shadow: #666 0px 0px 5px; box-shadow: #666 0px 0px 5px; margin-bottom:20px; } #content dt{ background:#111; color:#eee; font-size:16px; line-height:30px; height:30px; overflow:hidden; padding:5px; } #content dd{ font-size:14px; color:#333; padding:10px; } #content dl div{ height:25px; } #content dl div span{ margin-left:150px; margin-bottom:10px; font-size:14px; color:#333; } #content a{ color:#eee; } #content a:hover{ color:yellow; }
JS中的代码
//瀑布流效果 //初始化变量ajaxover来判断ajax发送给HTML的数据是否加载完毕；这样可以避免滚动条滚动到底部连续发送ajax请求 var ajaxover=true; //DOM加载完成时便执行一次ajax获取数据 $(document).ready(function(){ loadMore(); }); //滚动条触发事件；scroll是JQ内置事件 $(window).bind('scroll',function () { // 当滚动到最底部以上100像素时， 加载新内容 if ($(document).height() - $(this).scrollTop() - $(this).height()<100){ if (ajaxover) { //当ajaxover为真的时候，才执行loadMore()函数 loadMore(); }else { return false; } } }); //ajax异步读取数据；遍历后台获得的数据，每次遍历时对每个li的高度进行遍历判断，得出最矮那个，将数据插入那里面 function loadMore() { ajaxover = false; //当执行loadMore()函数的时候，就将ajaxover改为false，这样下面的ajax没执行完的时候不会再执行loadMore $.ajax({ url: ajaxHandle, dataType: 'json', type: 'post', data: { 'page': page, 'type': type }, success: function(content) { if (content.length > 0) { //遍历返回的数据(一个二维数组) for (var i = 0; i < content.length; i++) { //定义变量，对li遍历时进行排序用 var $row, iHtight, iTempHeight; // 找出当前高度最小的列, 新内容添加到该列 iHeight = -1; $('#content li').each(function() { iTempHeight = Number($(this).height()); //Number()将取出的高度转换为数值类型进行比较 if (iHeight == -1 || iHeight > iTempHeight) { iHeight = iTempHeight; $row = $(this); //对高度进行排序后，将最矮的那个保存到变量中 } }); //组装输出到HTML的数据 var item = '<dl>'; //这里的a链接不能直接使用U()方法；DOM加载完成后再加进去的链接是无法解析的；link是在HTML中定义的用于解析的链接link='& lt;{:U("Index/Show/index","","")}>';这样就能获得提交方法的地址了 item += '<dt>' + '<a href="' + link + '/id/' + content[i]['id'] + '">' + content[i]['title'] + '</a></dt>'; item += '<dd>' + content[i]['intro'] + '</dd>'; item += '<hr/>'; item += '<div><span>' + content[i]['date'] + '</span></div>'; item += '</dl>'; $row.append(item); //将数据插入到最矮的那个中 } } else { $(window).unbind('scroll'); //移除滚动条绑定的事件；这样就会在得不到数据的时候终止滚动条事件，不会进行无意义的ajax请求了 } ajaxover = true; //ajax返回给HTML的数据全部完成之后再将ajaxover设置为true；注意是写在success的函数里 } }); page++; //每加载一次页数加一（原理类似分页） }
PHP中的代码
//瀑布流的ajax异步数据传输 public function ajax(){ $page=$_POST['page']; //获取ajax发送过来的页数-第几页 $type=$_POST['type']; //获取ajax发送过来的类型-Android、iPhone、WindowsPhone、Other //每次取出10条数据 $pagesize=15; $m=M('article'); //limit(($page-1)*$pagesize,$pagesize);从第几条开始取，取出几条；用页数来判断从第几条开始取 $content=$m->where(array('delete'=>0,'type'=>$type))->field('id,title,intro,date')->order('date desc')->limit(($page-1)*$pagesize,$pagesize)->select(); if($content){ $this->ajaxReturn($content,'json'); }else{ $this->ajaxReturn(array('status'=>0),'json'); } }
要点：
1、通过ajaxover=true; 这样的方式来防止连续触发事件
2、数据库返回的json数据可以是二维数组，在JS中按照数组方式对其进行遍历即可
3、可以通过bind()来绑定事件，也可以通过unbind()来移除事件
4、 在JS中返回的数据的链接不能直接使用U()方法，因为DOM已经加载完了，通过AJAX异步过来的U()不会解析，所以需要先在模版中定义var link='<{:U("Index/Show/index","","")}>'; 在JS中用这个变量来进行链接地址的拼接'<a href="'+link+'/id/'+content[i]['id']+'">'
5、瀑布流的原理其实和分页类似，通过页数来判断获取的数据
下面是封装的方法，视情况而用
$(function(){ var is_ready = true; var url = '?m=mobilecenter&c=index&a=ajax_ordered'; var arr = new Array(3) arr['color'] = "George"; arr['color2'] = "John"; arr['color3'] = "Thomas"; var appends = $('#ordered_list'); ajax_down(is_ready,url,arr,appends); }); //is_ready:是否页面加载就加载数据 //url : ajax请求提交的路径 //arr:ajax提交到后台的变量数组array('name'=>'liming','sex'=>'man',...); //appends:需要追加的元素对象 function ajax_down(is_ready,url,arr,appends){ var page=1; //初始化页数 //初始化变量ajaxover来判断ajax发送给HTML的数据是否加载完毕；这样可以避免滚动条滚动到底部连续发送ajax请求 var ajaxover=true; //DOM加载完成时便执行一次ajax获取数据 if(is_ready){ loadMore(url,arr,appends); } //滚动条触发事件；scroll是JQ内置事件 $(window).bind('scroll',function(){ // 当滚动到最底部以上100像素时， 加载新内容 if ($(document).height() - $(this).scrollTop() - $(this).height()<100){ if (ajaxover) { //当ajaxover为真的时候，才执行loadMore()函数 loadMore(url,arr,appends); } else { return false; } } }); function loadMore(url,arr,appends) { ajaxover = false; //当执行loadMore()函数的时候，就将ajaxover改为false，这样下面的ajax没执行完的时候不会再执行loadMore var param = ''; for(var i in arr){ param += i +':"'+arr[i]+'",'; } param = param.substring(0,param.length-1); var aaa = '{page:'+page+','+param+'}'; param =eval('('+aaa+')'); $.ajax({ url:url, traditional: true, dataType: 'json', type: 'post', data: param, success: function(list) { alert(list); if (list) { //list 已经在后台拼接完成了 appends.append(list); }else{ //移除滚动条绑定的事件；这样就会在得不到数据的时候终止滚动条事件，不会进行无意义的ajax请求了 $(window).unbind('scroll'); } //ajax返回给HTML的数据全部完成之后再将ajaxover设置为true；注意是写在success的函数里 ajaxover = true; } }); page++; //每加载一次页数加一（原理类似分页） } }