近期做了一個移動端的搜尋瀑布流的效果，現在這種前端效果被廣泛使用在各大無限裝置上，

方便、簡潔、流暢是其最大特性！這次的效果是頁面每行三個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'=>'已經到頭了，沒有更多的記錄！')));
			}
		}
    }