您的位置：首页 > 编程语言 > PHP开发

thinphp下拉获取更多瀑布流效果

2016-03-31 16:06 411 查看 
html页面


<body>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.masonry.min.js"></script>
<div id="container" class=" container">
<volist name="list" id="vo">
<div class="item" style="height:230px;">
{$vo.title}
<input type="hidden" name="id" value="{$vo.id}"/>
</div>
</volist>
</div>

<div id="loading" class="loading-wrap">
<span class="loading">加载中，请稍后...</span>
</div>

<div class="footer"><center>我是页脚</center></div>
<script type="text/javascript">
$(function(){
//执行瀑布流
var $container = $('#container');
$container.masonry({
itemSelector : '.item',
isAnimated: true
});

var loading = $("#loading").data("on", false);
$(window).scroll(function(){
if(loading.data("on")) return;
if($(document).scrollTop() >
$(document).height()-$(window).height()-$('.footer').height()){
//加载更多数据
loading.data("on", true).fadeIn();
$.get(
"{:U('Index/getDbMore')}",
{"last_id" : $("#container>div:last>input").val()},
function(data){
var html = "";
if($.isArray(data)){
for(i in data){

html += "<div class=\"item\" style=\"height:230px;\">"+data[i]['title']+"";
html += "<input type=\"hidden\" name=\"id\" value=\""+data[i]['id']+"\"/></div>";
}
var $newElems = $(html).css({ opacity: 0 }).appendTo($container);
$newElems.imagesLoaded(function(){
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems, true );
});
loading.data("on", false);
}
loading.fadeOut();
},
"json"
);
}
});
});
</script>
</body>



thinkphp控制器


//初始化数据
public function index(){
　　$list = M('article')->order('id DESC')->limit(10)->select();
　　$this->assign('list', $list);
　　$this->display();
}

//获取下一栏数据
public function getDbMore(){
　　$last_id = $this->$_GET['last_id'];
　　$map['id'] = array('lt', $last_id);
　　$list = M('article')->where($map)->order('id DESC')->limit(6)->select();
　　$this->ajaxReturn($list);
}


　　点击下载jquery.masonry.min.js文件


                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航