中国最全IT社区平台 联系我们 | 收藏本站
华晨云阿里云优惠2

Jquery集合

浏览声明

UI

分类插件

模态框

滚动轮播

拖拉排序

多选框

滚动条

Loading

移动端

提示框

功能性插件

瀑布流

  • CSS3立方体小照片
  • D3.js logo可视化库 D3.js
  • 图片处理

    banner特效

    最小的响应式动态网格瀑布流布局js插件

    阅读 (2329)
    ie兼容9
    插件描述:该瀑布流插件的大小只有2KB,纯js编写,没有任何外部依赖

    简要教程

    minigrid是一款非常实用的动态网格瀑布流布局js插件。该瀑布流插件的大小只有2KB,纯js编写,没有任何外部依赖。你可以使用CSS3CSS3动画

    来制作简单的网格动画,也可以和dynamics.js集合来制作炫酷的网格动画。

    安装

    你可以通过nmp或bower来安装该网格瀑布流插件。

    • npm install minigrid

    • bower install minigrid                

    使用方法

    使用时需要引入minigrid.js文件。

    <script src="js/minigrid.js"></script>

    HTML结构

    该网格瀑布流的HTML结构使用嵌套<div>的HTML结构。

    <div class="grid">
      <div class="grid-item"></div>
      <div class="grid-item"></div>
      <div class="grid-item"></div>
      <div class="grid-item"></div>
    </div>

    CSS样式

    你需要为这个网格瀑布流布局设置一些基本样式。包裹容器div.grid建议设置为相对定位方式。

    .grid {
      position: relative;
    }

    然后为网格项设置决定定位方式。

    .grid-item {
      position: absolute;
    }

    初始化插件

    在页面加载之后,可以通过下面的方法来初始化该网格瀑布流插件。

    minigrid('.grid''.grid-item');

    API

    构造函数

    • minigrid(containerSelector, itemSelector, gutter, animate, done)                

    • containerSelector:String。包裹容器的选择器。该参数必须指定。

    • itemSelector:String。网格项的选择器。该参数必须指定。

    • gutter:Number。网格之间的间隙。默认值为6。

    • animate:function。网格动画。可选项。

    • done:function。网格更新之后的回调函数。

    animate参数:

    该参数是一个带element,x,y和index的函数。

    function animate(el, x, y, index) {
      // 在这里可以使用你的动画库来制作动画
    }
    minigrid('.grid''.grid-item'6, animate);

    响应式

    要制作响应式的网格布局,你可以为window对象添加事件监听。

    window.addEventListener('resize'function(){
      minigrid('.grid''.grid-item');
    });

    动画

    你可以使用CSS3的transition来制作简单的网格动画效果。

    .grid-item {
      transition: .3s ease-in-out;
    }

    或者你可以结合Dynamics.js动画库来制作更为复杂和炫酷的网格动画效果。

    function animate(item, x, y, index) {
      dynamics.animate(item, {
        translateX: x,
        translateY: y
      }, {
        type: dynamics.spring,
        duration: 800,
        frequency: 120,
        delay: 100 + index * 30
      });
    }
     
    minigrid('.grid''.grid-item'6, animate);


    关闭
    程序员人生