thnkphp 瀑布流

HTML部分：

<input type="hidden" value="5" id="nextrow" />        
<div id="page">  
<div class="index-div" id="card-content">   
    <div class="index-news jscard-box pic_list" >
<ul>

<volist name="Article" id="Art">
         <li class="showpic-devp">
<a href="/Index.php?m=Wap&c=Article&a=article&id={$Art.id}" title="{$Art.title}">
          <div class="pic"><img src="{$Art.cover}" /></div>
<div class="list_txt p_ht">
<h4>{$Art.title}</h4>
<p class="time">阅读：{$Art.counts} </p>
</div>
         </a>
</li>
</volist>
<div  id="container"></div>
</ul>
    </div> 
</div>  
<div id="overout" style="padding-top:35px;padding-bottom:35px;text-align: center;">
<!--加载中-->
<div id="loading" class="loading-wrap">
    <span class="loading">加载中，请稍后...</span>
</div>
<!--加载中-->


</div>

JS部分

<script type="text/javascript">
$(function(){
    //执行瀑布流
   var $container = $('#container');
$container.imagesLoaded(function(){
 $container.masonry({
   itemSelector : '.item',
   isAnimated: true
 });
});
var loading = $("#loading").data("on", false);
$(window).scroll(function(){
var nextrow=$("#nextrow").val();//下次加载从nextrow条开始
if(loading.data("on")) return;
if($(document).scrollTop() > 
$(document).height()-$(window).height()-$('.footer').height()){
//加载更多数据
loading.data("on", true).fadeIn();
$.get(
"/index.php?m=Wap&c=Article&a=getMore", 
{"id" : $container.find(".item:last").attr("id"),
"nextrow":nextrow
},
function(data){
if(data==''){
$("#overout").html('<span class="loadings">已经全部加载完...</span>');
}else{
$("#nextrow").val(parseInt(nextrow)+5);//每次加载5条
var html = "",item;
if($.isArray(data)){
for(i in data){
item = data[i]; 
html += '<li class=showpic-devp> <a href=/Index.php?m=Wap&c=Article&a=article&id=' + item.id+ ' title=' + item.title+ '> <div class=pic><img src=' + item.cover+ ' /></div> <div class=list_txt p_ht> <h4>' + item.title+ '</h4> <p class=time>阅读：' + item.counts+ ' 次</p> </div> </a> </li>'; 
}
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>

PHP部分

public function index($id = NULL)
{
if (isset($id) && $id != "")
{
// 指定的具体的文章ID号，直接跳转到相应的文章显示页面，
// 而且会通过微信的开放API接口获取用户的微信OPENID
$this->article($id);
return;
}

$this->getOpenID(); // 获取用户在魔高码上乐园公众号的openid

$this->getJsTicket();

// 初始文章
$selArticleList = $this->getArticleList(0, 10, "id desc");

        $this->assign('Article', $selArticleList);
 
$this->assign("WxShareTitle", "魔高码上乐园");
$this->assign("WxShareDisc", "好玩又有趣的二维码世界，新奇、好玩、有趣，惊喜多多，更多精彩等你来发现！");
$this->assign("WxShareCover", $_SERVER["REQUEST_SCHEME"].'://'.$_SERVER["SERVER_NAME"]."/Public/images/logo32.png");
$this->assign("ContentKey", "article");
$this->assign("ContentID", 0);  // 0表示游戏索引页，用于记录分享行为

$this->display("Wap@Article:Index");
    }


 


    // 获取一次AJAX请求的数据
    public function getMore()
    { 
    //下拉的时候的条件
    if ($_GET['nextrow'])
    {
    $pagestart  = $_GET['nextrow'];
    }
else
{
    $pagestart  = 0;
    } 

$selArticleList = $this->getArticleList($pagestart, 5, "id desc");

header("Content-type:text/html;charset=utf-8");
    echo json_encode($selArticleList);   
    }