基于Isotope和infinitescroll實現的無限滾動瀑布流插件

jopen 10年前發布 | 10K 次閱讀 前端技術 isotope

基于Isotope和infinitescroll實現的無限滾動瀑布流插件，適用于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.baiduhome.net/lib/view/home/1440421992825

 本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！