响应式瀑布流插件minigrid.js

所属分类:UI-布局

 35011  381  查看评论 (1)
分享到微信朋友圈
X
响应式瀑布流插件minigrid.js ie兼容9

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

你可以使用CSS3动画来制作简单的网格动画,也可以和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);
相关插件-布局

扁平化风格响应式后台管理模板

基于bootstrap后台管理界面
  布局
 58449  543

仿云后台管理界面模板

仿云后台管理界面模板html源码
  布局
 75733  748

Delta html5模板 Bootstrap 响应式网站前端源码

一个优秀的展示网站为你产品的销售带来更多的亮点,模板简单明了的,只需要简单的更换内容,你的网站就可以直接上线运营。
  布局
 27217  422

jQuery bootstrap响应式网站模板

jQuery bootstrap响应式网站模板,它具有下拉菜单,移动画布菜单,流畅的动画,旋转轮播图,jQuery计数器等功能。 使用最新技术构建,如HTML5,CSS3,和jQuery。
  布局
 18179  290

讨论这个项目(1)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    谎?惜萱 0
    2021/7/14 11:11:52
    图片多个之后加载很慢 怎么解决 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复