thinkPHP实现瀑布流的方法_php实例-tutoriel php-php.cn

thinkPHP实现瀑布流的方法_php实例

WBOY

Libérer： 2016-05-16 20:29:54

original

1078 Les gens l'ont consulté

本文实例讲述了thinkPHP实现瀑布流的方法。分享给大家供大家参考。具体分析如下：

很多人都想做瀑布流的效果,这里告诉大家官网使用的方法,首先要下载瀑布流的插件jquery.masonry.min.js 地址：http://masonry.desandro.com/index.html里面包含的很多示例.

流程:

1. 页面初始化时,调用插件进行一次排版；

2. 当用户将滚动条拖到底部时,用ajax加载一次数据,并排版显示

3. 重复2,直到无数据

Html代码:

复制代码代码如下:

Insert title here

瀑布流下来了

加载中，请稍后...

";
});
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"
);
}
});
});

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框架程序设计有所帮助。