用ajax写瀑布流,AJAX异步实现简单的瀑布流

传统瀑布流布局ul-li，须要先设定显示几列，每列是一个li，须要左浮动并指定宽度，li里面的布局也要先布局好，主要是要定宽，高度自动；而后经过ajax异步，从数据库中获得数据，遍历后将数据插入最矮的li中javascript

HTML中的代码：

var ajaxHandle=''; //这个是JS提交AJAX数据的后台方法的地址

var link=''; //这个是AJAX返回给HTML数据中连接须要用到的地址

var type=1; //定义类型：Android，iPhone，windowsphone，other

var page=1; //初始化页数

java

CSS中的代码ajax

#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中的代码json

//瀑布流效果

//初始化变量ajaxover来判断ajax发送给HTML的数据是否加载完毕；这样能够避免滚动条滚动到底部连续发送ajax请求

var ajaxover=true;windows

//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;

}app

}

});异步

//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='

//这里的a连接不能直接使用U()方法；DOM加载完成后再加进去的连接是没法解析的；link是在HTML中定义的用于解析的连接link='& lt;{:U("Index/Show/index","","")}>';这样就能得到提交方法的地址了

item+='

'+' '+content[i]['title']+'';

item+='

'+content[i]['intro']+'';

item+='

---

';

item+='

'+content[i]['date']+'

';

item+='

';

$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');

}

}

要点：

一、经过ajaxover=true; 这样的方式来防止连续触发事件

二、数据库返回的json数据能够是二维数组，在JS中按照数组方式对其进行遍历便可

三、能够经过bind()来绑定事件，也能够经过unbind()来移除事件

四、 在JS中返回的数据的连接不能直接使用U()方法，由于DOM已经加载完了，经过AJAX异步过来的U()不会解析，因此须要先在模版中定义var link=''; 在JS中用这个变量来进行连接地址的拼接''

五、瀑布流的原理其实和分页相似，经过页数来判断获取的数据