移动端通过JQ实现瀑布流效果方法

近期做了一个移动端的搜索瀑布流的效果，现在这种前端效果被广泛使用在各大无限设备上，
方便、简洁、流畅是其最大特性！这次的效果是页面每行三个div展示内容，共三行。最底部用文字“获取更多”来提示
用户点击“获取更多”通过JQ实现页面无刷新从数据库查询新的内容，并插入到原内容底部展示。
思路就是，初次展示时是limit（0，10）当点击“获取”通过jq跳到后台的方法中去获取的应该limit（10，10）再点击就是limit（20，10）
模板关键部位代码如下{if $fm_album_list}
    {if $count_fm<=$fm_num}
        <div class="get_more line_over"><!-- <a>已经到头了，没有更多记录！</a> --></div>
    {else}
        <div class="get_more line"><a>获取更多...</a></div>
    {/if}
{else}
    <div class="get_more line"><a>没有更多记录！</a></div>
{/if}
JavaScript代码如下：<script>
var countAlbum = {$countAlbum};//展示的个数‘9’，作为Ajax函数中limit的初始值
$(function(){
$('.get_more').find('a').eq(0).bind('click',function(e){
search.GetNewFmCentent(countAlbum,"{$keyword}");
});
});
</script>

var search ={
//搜索时调用的fm需要的操作
GetNewFmCentent:function(album_count,keyword){
$.getJSON('/index.php?s=home/search/getnewfmcentent',{'album_count':album_count,'keyword':keyword},function(data){
if(data.result){
var _html = '';
for(var i=0;i<data.list.length;i++){
_html += '<li'+((i+1)%3==0?' class="end"':'')+'>';
_html += '	<div class="v_play" data_video_id="'+data.list[i].sound_id+'"><a href="/albumplay/'+data.list[i].album_id+'/autoplay/1/" title="'+data.list[i].album_title+'"><i class="iconfont"></i></a></div>';
_html += '	<div class="album_pic" style="position:relative;width:99%;float:left;border:#eee 1px solid;">';
_html += '		<a href="/albumplay/'+data.list[i].album_id+'/" title="'+data.list[i].album_title+'"><img src="/'+data.list[i].album_thumbnail+'" width="100%"></a>';
_html += '		<div class="tit_bg"></div>';
_html += '	    <a href="/albumplay/'+data.list[i].album_id+'/" class="a_tit">'+data.list[i].album_title+'</a>';
_html += '	</div>';
_html += '	<div class="tit"><a href="/sound/'+data.list[i].sound_id+'/" title="'+data.list[i].sound_title+'" target="_blank">'+data.list[i].sound_title+'</a></div>';
if(data.list[i].view_count>0){
_html += '	<div class="m"><div class="view_count"><i class="iconfont"></i>'+data.list[i].view_count+'</div></div>';
}
_html += '</li>';
}
$('.search_album').append(_html);
$('.get_more').find('a').eq(0).unbind();
if(data.over_bottom){
$('.get_more').find('a').eq(0).html(data.over_bottom);
$('.get_more').find('a').eq(0).unbind();
}else{
$('.get_more').find('a').eq(0).bind('click',function(){
search.GetNewFmCentent(data.count_album,keyword);
});
}
}else{
$('.get_more').find('a').eq(0).html(data.info);
$('.get_more').find('a').eq(0).unbind();
}
});
}
}

后台：public function getNewFMCentent(){
$keyword = $this->_req->param('keyword')?urldecode(trim($this->_req->param('keyword'))):'';
$album_count = $this->_req->param('album_count')?urldecode(trim($this->_req->param('album_count'))):'0';
$num = 9;//查询几条数据
if($keyword!==''){
$fm_album_list = Db::name('MediaAlbum')->alias('ma')
->join($this->_tab_prefix."user u", "ma.user_id=u.user_id")
->join($this->_tab_prefix."fm_sound fm", "ma.album_id=fm.album_id", 'LEFT')
->join($this->_tab_prefix."channel c","c.channel_id=ma.channel_id")
->where("fm.content_type=0 and fm.is_auditing=1 and ma.is_auditing=1 and ma.media_type=1 and (ma.album_title like '%$keyword%' or c.channel_name like '%$keyword%' or ma.album_intro like '%$keyword%' or fm.sound_title like '%$keyword%')")
->field("u.user_id,u.nick_name,ma.album_id,ma.album_title,ma.album_thumbnail,ma.view_count,(
(case when INSTR(ma.album_title,'$keyword')>0 then 6 else 0 end)+
(case when INSTR(c.channel_name,'$keyword')>0 then 4 else 0 end)+
(case when INSTR(ma.album_intro,'$keyword')>0 then 2 else 0 end)+
(case when INSTR(fm.sound_title,'$keyword')>0 then 1 else 0 end)
) as orderid")
->order("orderid desc")
->group('ma.album_id')
->limit($album_count,$num)
->select();
//echo Db::getLastSql();
if($fm_album_list){
foreach($fm_album_list as $k=>$v)
{
/* 专辑最新音频 */
$lastnew_fm = Db::name('FmSound')->where("album_id=".$v['album_id']." and is_auditing=1")->field('sound_id,sound_title')->order('add_time desc')->limit(1)->find();
$fm_album_list[$k]['sound_id'] = $lastnew_fm?$lastnew_fm['sound_id']:0;
$fm_album_list[$k]['sound_title'] = $lastnew_fm?$lastnew_fm['sound_title']:'';
}
}
}
//print_r($album_count+$num);
if ($fm_album_list==false) {
exit(json_encode(array('result'=>0, 'info'=>'已经到头了，没有更多的记录！')));
}else{
if(count($fm_album_list)==$num){
exit(json_encode(array('result'=>1, 'list'=>$fm_album_list, 'count_album'=>$album_count+$num, 'keyword'=>$keyword)));
}else{
exit(json_encode(array('result'=>1, 'list'=>$fm_album_list, 'count_album'=>$album_count+$num, 'keyword'=>$keyword, 'over_bottom'=>'已经到头了，没有更多的记录！')));
}
}
}瀑布流中最主要就是有一个可用来排序的唯一“主键”通过这个“主键”依次获取需要的内容。