這個(gè)是官網(wǎng)的示例地址：https://www.layui.com/demo/flow.html     

下面介紹一下我在使用中的一些問(wèn)題：
前端js
function flow() {
  layui.use('flow', function(){
  var $ = layui.jquery; //不用額外加載jQuery，flow模塊本身是有依賴jQuery的，直接用即可。
  var flow = layui.flow;
  $('#newsBox').html('');// 清空容器
  flow.load({
    elem: '#newsBox'  //放內(nèi)容的容器
    ,isAuto: false
    ,isLazyimg: true
    ,done: function(page, next){ //到達(dá)臨界點(diǎn)（默認(rèn)滾動(dòng)觸發(fā)），觸發(fā)下一頁(yè)
      var lis = [];
      id="{$id}"
      
      var arr=$('#search').serialize();//獲取form提交的數(shù)據(jù)
      url= "{:U('Download/search')}?id="+id+'&page='+1+ '&'+arr
      //id 分類(lèi)id page / 頁(yè)碼  arr 其他的篩選條件
      $.get(url, function(res){
       
        //假設(shè)你的列表返回在data集合中
        layui.each(res.data, function(index, item){
 
       
         lis.push(item);//可在這里循環(huán)數(shù)據(jù)，也可以在后臺(tái)
        }); 
        
        //執(zhí)行下一頁(yè)渲染，第二參數(shù)為：滿足“加載更多”的條件，即后面仍有分頁(yè)
        //pages為Ajax返回的總頁(yè)數(shù)，只有當(dāng)前頁(yè)小于總頁(yè)數(shù)的情況下，才會(huì)繼續(xù)出現(xiàn)加載更多
        next(lis.join(''), page < res.pages);    
       
      });
    }
  });
}); 
}
示例圖片：
 

$('#keys').blur(function(){
flow() //輸入關(guān)鍵詞后，重新加載數(shù)據(jù)
})    
$('#select_sub').click(function(){
  
  flow() 
}) 
$('.select_item').change(function(){
   //alert(1) 
   flow() //改變下拉選項(xiàng)的時(shí)候，重新加載數(shù)據(jù)
})
flow() //頁(yè)面加載時(shí)候，加載數(shù)據(jù)

后臺(tái)代碼就是接受到數(shù)據(jù)查詢數(shù)據(jù)
    public function search(){
      if (IS_AJAX) {
         $pagesize=6;//每頁(yè)顯示個(gè)數(shù)
         $currentpage= I('page',1);//當(dāng)前頁(yè)碼
         $recordstart=($currentpage-1)*$pagesize;//開(kāi)始條數(shù)
         $cid=I('id');
         $map['category_id']=$cid;
         $map['is_show']=1;
         $map['status']=1;
         $category=I('category');
         $title=I('title');
         if($title){
           $map['title']=array('like','%'.$title.'%');
           $this->title=$title;
         }
         foreach($category as $k=>$v){
           if($v){
             $map['model_id']=array('like','%,'.$v.',%');
           }
         }
         $totalrows=M('download')->where($map)->order('title,create_time desc,id desc')->count();
         $list = M('download')->where($map)->order('order_id,create_time desc,id desc')->limit($recordstart,$pagesize)->select();
         $news_list='';
         foreach($list as $k =>$v){
         $url=$v['type_id']==1 ? .$v['file'] :$v['url']; 
         $news_list.='<a href="'.$url.'" target="_blank" class="wow fadeInUp">
             <div class="d1 ones">'.$v['title'].'</div>
             <div class="d2 ones">語(yǔ)言：'.$v['lang'].'      更新日期：'.date('Y-m-d',$v['create_time']).'</div>
             <div class="d3">立即下載</div>
         </a>';
         }
        $res["data"]=$news_list;
        $all=ceil($totalrows/$pagesize);
        $res['pages']=$all;     
       $this->ajaxReturn($res);
                      
       
      }
      
      }
 

這樣就能解決 layui流加載，重新加載，篩選查找的需求，達(dá)到局部刷新的效果，比較適合手機(jī)端和響應(yīng)式頁(yè)面
 

layui流加載其他應(yīng)用可以去官網(wǎng) ，滑動(dòng)到指定位置加載圖片或內(nèi)容 在移動(dòng)端還是有很多的應(yīng)用。