基于Isotope和infinitescroll实现的无限滚动瀑布流插件

jopen 10年前

基于Isotopeinfinitescroll实现的无限滚动瀑布流插件,适用于yii1.1

使用方法

Controller

    public function actionIndex()      {          $dataProvider = new CActiveDataProvider('Picture', array(              'criteria' => array(                  //'condition' => $condition,                  'order' => 'pic_type DESC,pic_index',                  //'with' => array('author'),              ),              'pagination' => array(                  'pageSize' => 8,              ),          ));          $this->render('index',array('dataProvider'=>$dataProvider));      }

View

    $this->widget('ext.isotope.Isotope', array(   //继承自CListView              'dataProvider' => $dataProvider,              'itemView' => '_pic',              'itemSelectorClass' => 'pic_container', //isotope插件的itemSelector配置项,类选择器              'options' => array(),              'template' => '{items}{pager}',              'infiniteOptions'=>array(            //请参考infiniteScroll的参数设置                  'loading'=>array(                      'finishedMsg'=>'<em>已加载全部数据</em>',                      'msgText'=>'<em>加载中</em>',                      'speed'=>'normal',                  ),                  'bufferPx'=>0,                  'pixelsFromNavToBottom'=>10,              ),          ));

项目主页:http://www.open-open.com/lib/view/home/1440421992825