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

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文件