流体(瀑布流)布局插件:Waterfall

最新推荐文章于 2024-10-18 11:39:12 发布

原创最新推荐文章于 2024-10-18 11:39:12 发布 · 388 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #javascript #ViewUI

javascript 同时被 2 个专栏收录

45 篇文章

订阅专栏

jquery

31 篇文章

订阅专栏

介绍jQuery Waterfall插件的使用方法，包括加载jQuery库、调用接口及设置选项，展示如何通过Ajax获取数据并应用插件实现响应式布局。提供GitHub链接和示例网站。

Waterfall是jQuery流体布局插件

当前版本: 1.0.6

更新时间: 2012.2.11

使用方法

加载jQuery库 (需1.4+)

加载jQuery.waterfull.min.js , 必须在jQuery库之后;

调用接口: $node.waterfall({/* 此处为设置选项, 可留空 */})

如: $('#container').waterfall({})

设置选项

       {
      
       itemSelector:
       '.post-home'
       ,     
       //子元素id/class, 可留空 
      
       columnCount:4,                 
       // 列数,  纯数字, 可留空 
      
       columnWidth:300,               
       // 列宽度, 纯数字, 可留空 
      
       isResizable:
       false
       ,             
       // 自适应浏览器宽度, 默认false 
      
       isAnimated:
       false
       ,              
       // 元素动画, 默认false 
      
       Duration:500,                  
       // 动画时间 
      
       Easing:
       'swing'
       ,                
       // 动画效果, 配合 jQuery Easing Plugin 使用 
      
       endFn:
       function
       (){},            
       // 回调函数 
      
       }

Ajax

       $.ajax({
      
       type: 
       "POST"
       , 
      
       url: 
       "some.php"
       , 
      
       success: 
       function
       (data){ 
      
       $(
       "#container"
       ).append(data).waterfall({}); 
      
       } 
      
       });