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

Posted Champion-水龙果

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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文件






以上是关于thinphp下拉获取更多瀑布流效果的主要内容，如果未能解决你的问题，请参考以下文章
 

 Flutter自适应瀑布流


 jquery实现无限滚动瀑布流实现原理


 怎样在网页中做出瀑布流效果？


 django模板中使用JQ代码实现瀑布流显示效果


 js实现瀑布流以及加载效果


 wordpress制作照片瀑布流的效果，如何实现？