注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

秦时明月

做好今天的事!

 
 
 

日志

 
 
 
 

Isotope 或 Masonry扩展, Yii的瀑布流功能  

2014-11-07 10:05:14|  分类: Yii |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

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

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

用法:

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

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

  1. 复制代码<?php $this->widget('ext.isotope.Isotope',array(
  2.  
  3. 'dataProvider'=>new CActiveDataProvider('User'),
  4.  
  5. 'itemView'=>'_view',
  6.  
  7. 'itemSelectorClass'=>'item',
  8.  
  9. 'options'=>array(), // options for the isotope jquery
  10.  
  11. 'infiniteScroll'=>true, // 默认为 true,是否自动加载
  12.  
  13. 'infiniteOptions'=>array(), // javascript options for infinite scroller
  14.  
  15. 'id'=>'wall',
  16.  
  17. ));
  18.  
  19. ?>

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

  1. 复制代码<div class="post item">
  2.  
  3. <div class="wells">
  4.  
  5. <h4>
  6.  
  7. <a href="<?php echo $data->link; ?>" target="_blank"><?php echo $data->title; ?></a>
  8.  
  9. </h4>
  10.  
  11. <div class="info">
  12.  
  13. <span><?php date('M jS, g:ia',strtotime($data->created_at)); ?></span>
  14.  
  15. </div>
  16.  
  17. </div>
  18.  
  19. </div>

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



http://www.yiichina.com/extension/97

  评论这张
 
阅读(13)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017