无限滚动分页

时间:2015-01-12 09:07:19

标签: php jquery codeigniter phpflickr

任何人都可以告诉我们如何为$ flickr->调用实现无限滚动分页(' flickr.photos.search');我已登录的用户和前10张照片。 现在如何为剩余的照片实现滚动分页。

我正在使用* Flickr API Kit,支持OAuth 1.0a for PHP> = 5.3.0。 和Codeigniter

任何帮助都将不胜感激....

1 个答案:

答案 0 :(得分:1)

为包含设计中的故事的div提供唯一的id值,并使用Jquery使用Ajax Post将值发布到控制器,然后检索下一组Flickr数据。 一旦你将结果附加到最后一个div之下。

您的查看页面如下所示:

<div class="flickr_container">       
<div class="flickr_myphotos" id="<?php echo $fli; ?>">
{your flickr photos here }
</div>

<div class="flickr_myphotos" id="<?php echo $fli; ?>">
{your flickr photos here }
</div>
.........
</div>

您的Jquery Scroll事件如下所示:

$('.container').bind('scroll', function(){

if($(".container").scrollTop() + $(".container").innerHeight()>=$(".container")[0].scrollHeight)
    {

            var LastDiv = $(".flickr_myphotos:last");
            var LastId  = $('.flickr_myphotos').last().attr('id');
            var dataString = 'LastId='+ LastId ;

            if(dataString){
                $.ajax({
                type: "POST",
                url: "{ Controller here }",
                data: dataString,
                cache: false,
                success: function(html){
                LastDiv.after(html);

                });
}

你的控制器功能:

$parameters = array('user_id' => {USER ID HERE} ,'per_page' => 10,'page' => $page); $result = $flickr->call('flickr.photos.search', $parameters);

将结果放在视图中

<div class="flickr_myphotos" id="<?php echo $fli; ?>">
{your flickr photos here }
</div>