师阳 2014-08-25 20:03:40 7407次浏览 1条评论 10 4 0

瀑布流,一种比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部。

下载地址:http://www.yiiframework.com/extension/isotope-jquery/files/isotope.zip

用法:

下载文件后解压到扩展目录下

在视图文件中,加入如下代码,该扩展用起来跟CListView差不多

<?php 
$this->widget('ext.isotope.Isotope',array(

    'dataProvider'=>new CActiveDataProvider('User'),

    'itemView'=>'_view',

    'itemSelectorClass'=>'item',

    'options'=>array(), // options for the isotope jquery

    'infiniteScroll'=>true, // 默认为 true,是否自动加载

    'infiniteOptions'=>array(), // javascript options for infinite scroller

    'id'=>'wall',

));

?>

创建一个_view.php文件(该文件名对应上面的itemView),确认你给它设定了宽度:

<div class="post item">

    <div class="wells">

        <h4>

            <a href="<?php echo $data->link; ?>" target="_blank"><?php echo $data->title; ?></a>

        </h4> 

        <div class="info">

            <span><?php date('M jS, g:ia',strtotime($data->created_at)); ?></span>

        </div>

    </div>

 </div>

原文:http://www.yiiframework.com/extension/isotope-jquery

觉得很赞
您需要登录后才可以评论。登录 | 立即注册