easygrid.js无规则网格布局插件

easygrid.js无规则网格布局插件源码下载

看看谁在用

查看文件结构

文件大小:0.03M

资源分类: 插件-背景和布局

更新时间: 2021-04-19

easygrid.js是一个简单的响应式布局框架,可定制的,动画效果布局网站或网页应用的网格布局。比如常见的瀑布流样式。

基于调用方式
const demo = new EasyGrid({
      selector: "#grid",
      // 在这里配置
});
追加网格
// 添加单个网格
demo.AddItem({
  items: "Any HTML Here"
});

// 添加网格数组
const myElements = [item1, item2, item3, ...]
demo.AddItem({
  items: myElements
});

// 触发一个函数后添加
demo.AddItem({
  items: myElements,
  onComplete: function(){
    console.log("Completed!");
  }
});
丰富的自定义设置
const demo = new EasyGrid({

      // 网格选择器
      selector: "#defaultId",

      dimensions: {
        width: "150",
        height: "100",
        margin: "5",
        minHeight: "100",
        maxHeight: "300"
      },

      // 这里配置动画
      animations: {
        fadeInSpeed: "100",
        addItemSpeed: "100"
      },

      // 从HTML获取项目
      config: {
        fetchFromHTML: true,
        filter: true
      },

      // 拓展样式
      style: {
        background: "rgb(96, 120, 134)",
        borderRadius: "5"
      },

      responsive: [
        {
          breakpoint: 500,
          columns: 2
        },
        {
          breakpoint: 300,
          columns: 1
        }
      ]
      
});
一些API方法
// 清除
demo.Clear();

// 设置网格
demo.SetupEasyGrid();

// 重新放置网格
demo.Refresh();

// 过滤所有元素相匹配的特定类
demo1.Filter();

easygrid.js无规则网格布局插件

正在加载文件目录...

也许你还喜欢

  1. css3无规则网格布局样式
  2. css3+js玻璃样式卡片网格样式
  3. 纯css不规则网格布局
  4. jQuery瀑布流样式插件
  5. Masonry瀑布流布局jQuery插件下拉加载
  6. 网格内图片滚动效果js代码
js+svg动画效果tab菜单栏
  • 标签查找|关于我们|用户协议|格式化工具|bootstrapmb.com 版权所有 苏ICP备17077179号-2
  • 背景样式编辑器|按钮样式编辑器|背景动效编辑器|图片布局编辑器