`
jsczxy2
  • 浏览: 1273636 次
  • 性别: Icon_minigender_1
  • 来自: 常州
文章分类
社区版块
存档分类
最新评论

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

阅读更多

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({});
   }
});

github地址https://github.com/iMuFeng/Waterfall

使用网站:http://www.boxui.com

分享到:
评论

相关推荐

    vuewaterfall瀑布流插件自适应PC移动端无需预设置高度

    VueWaterfall瀑布流插件是基于Vue.js框架开发的一款组件,专为实现PC和移动端的瀑布流布局设计。瀑布流布局是一种流行的设计模式,尤其在展示图像或内容时,能够提供良好的视觉效果和用户体验。VueWaterfall插件的...

    jQuery网格瀑布流布局插件.rar

    《jQuery网格瀑布流布局插件详解与应用》 在网页设计中,瀑布流布局因其独特的视觉效果和良好的用户体验,已经成为一种流行的布局方式。本篇文章将深入探讨一款基于jQuery的网格瀑布流布局插件,该插件名为...

    waterFall瀑布流插件

    在这个"waterFall"瀑布流插件中,我们可以看到JavaScript和CSS技术的巧妙结合,用于实现这种动态效果。 JavaScript在瀑布流插件中的作用主要体现在以下几个方面: 1. **动态加载**:当用户滚动到页面底部时,...

    瀑布流实现

    瀑布流布局,也被称为“Masonry Layout”,是一种常见的网页或应用设计布局方式,尤其在图片展示、电商商品展示等领域广泛应用。这种布局方式模仿了瀑布流水的效果,每行元素的高度不固定,新元素会自然地填充到前面...

    瀑布流无限加载图片插件jq-waterfall

    4. 更新布局:收到新数据后,插件会将这些图片元素添加到已有的瀑布流中,并重新调整布局,确保新的图片能无缝融入现有的瀑布流结构。 5. 响应式设计:jq-waterfall插件能够根据浏览器窗口大小的变化实时调整图片的...

    vue瀑布流组件(vue-waterfall-easy 2.x)

    vue瀑布流组件(vue-waterfall-easy 2.x) 这是一个vue组件,包含瀑布流布局和无限滚动加载 与其他实现相比,无需在返回的数据中指定图像的宽度和高度 正是因为有了第二项,图像才被预加载,然后进行布局 响应式...

    waterfall瀑布流.rar

    3. **JavaScript 插件**:如jQuery Masonry、Isotope等库,它们通过JavaScript动态计算元素的位置,实现瀑布流布局。这些库通常会在页面加载或窗口尺寸改变时重新计算元素的布局,以保持最佳的显示效果。 4. **响应...

    JQ 使用waterfall插件实现瀑布流

    瀑布流布局是一种常见的...总结起来,使用jQuery的waterfall插件实现瀑布流布局主要包括引入插件、初始化元素、处理滚动加载等步骤。通过灵活配置和扩展,可以创建出适应不同场景的瀑布流布局,提供优秀的用户体验。

    waterfall自适应图片瀑布流布局无限加载代码

    "waterfall自适应图片瀑布流布局无限加载代码"是一个典型的前端网页设计技术,主要用于创建具有视觉吸引力的图像展示页面。这种布局方式模仿了瀑布流水的效果,使得图片在不同设备上,如电脑、平板和手机,都能...

    瀑布流waterfall

    瀑布流布局,也被称为Pinterest布局或Masonry布局,是...总的来说,瀑布流布局插件"waterfall"是网页设计中实现视觉吸引力和用户友好体验的一种工具,通过jQuery库的支持,开发者可以轻松地在项目中集成这种布局方式。

    jquery瀑布流布局插件类似于Pinterest

    瀑布流布局插件使得开发者能够快速构建出具有视觉吸引力的页面,而无需深入了解复杂的CSS布局技巧。jQuery的瀑布流插件一般会提供以下功能: 1. **自动调整布局**:根据浏览器窗口大小的变化,插件能够自动重新排列...

    Android 自定义瀑布流式布局

    在Android开发中,瀑布流式布局(Waterfall Layout)是一种常见的UI设计模式,它主要用于展示内容丰富的列表,如图片、商品、文章等,通常应用于新闻客户端、电商应用等。这种布局方式模仿了真实世界中瀑布流水的...

    JQ 瀑布流的插件

    这些插件简化了开发者实现瀑布流布局的过程,通过简单的API调用和配置选项,就能在网页上快速构建出美观的瀑布流布局。 这个压缩包中的"demo"文件可能是一个示例项目,包含了一个演示如何使用这个JQ瀑布流插件的...

    waterfall, Duitang Waterfall Woo. (堆糖瀑布流).zip

    1. **瀑布流布局**:瀑布流布局(Waterfall Layout)是一种多列布局方式,每列的高度不固定,新元素会自动填充到前一列的下方,形成一种类似瀑布下落的效果。这种布局在响应式设计中尤其受欢迎,因为它能自适应不同...

    搞定 瀑布流 布局 Css Jquery

    瀑布流布局(Waterfall Layout)是一种能够自动调整容器内项目位置,以达到美观效果的布局方式。这种布局方式最早被Pinterest采用,随后迅速流行开来,成为许多网站和应用中展示图片或卡片式内容的标准布局之一。...

    安卓瀑布流相关-waterfall瀑布流.zip

    瀑布流布局,也称为瀑布流式布局或无限滚动布局,是一种常见的网页和移动应用界面设计方式,尤其在图片展示和电商应用中广泛使用。这种布局方式最初由Pinterest网站引入,其特点是页面元素(如图片)按照网格排列,...

    微信小程序-微信小程序-瀑布流布局

    微信小程序-瀑布流布局 说明: 实现瀑布流布局和无限下拉加载功能。 数据接口: https://api.getweapp.com/vendor/tngou/tnfs/api/list 目录结构: pages — 存放项目页面文件 开发环境: 微信web开发者工具 v...

    微信小程序实现瀑布流布局与无限加载的方法详解

    【微信小程序瀑布流布局】 瀑布流布局,又称为Masonry布局,是一种常见的网页设计布局方式,常用于展示图片、商品等元素,具有视觉吸引力和良好的用户体验。它的特点是每一行的元素并不保持统一的高度,而是根据...

    swift-可横竖向切换的瀑布流布局

    在iOS应用开发中,瀑布流布局(Waterfall Layout)是一种常用的设计模式,它通常用于展示图片或商品等信息,能够使界面看起来更加美观且易于浏览。这种布局方式的特点是每一列的高度不同,根据内容自动调整,形成...

Global site tag (gtag.js) - Google Analytics