近期做了一個移動端的搜索瀑布流的效果,現在這種前端效果被廣泛使用在各大無限設備上,
方便、簡潔、流暢是其最大特性!這次的效果是頁面每行三個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'=>'已經到頭了,沒有更多的記錄!')));
}
}
}
瀑布流中最主要就是有一個可用來排序的唯一“主鍵”通過這個“主鍵”依次獲取需要的內容。