Any-Grid-Layout

Appearance

快速获得布局测试数据 ​

构造器 ​

ts
const container = new Container({
  el: '#container',
  // el: document.getElementById('container'),
  layouts: {
    autoGrow: {
      vertical: true,
      horizontal: false,
    },
    items: layoutData,
    ratioCol: 0.2,
    margin: [10, 10],
    size: [120, 80],
    minCol: 5,
    minRow: 5,
    exchange: true,
    // sizeWidth: 50,
    // sizeHeight: 80,
    // marginX: 30,
    // marginY: 50,
  },
  events:events,
  global: {
    exchange: true,
    ratioCol: 0.3,
  }
})
const container = new Container({
  el: '#container',
  // el: document.getElementById('container'),
  layouts: {
    autoGrow: {
      vertical: true,
      horizontal: false,
    },
    items: layoutData,
    ratioCol: 0.2,
    margin: [10, 10],
    size: [120, 80],
    minCol: 5,
    minRow: 5,
    exchange: true,
    // sizeWidth: 50,
    // sizeHeight: 80,
    // marginX: 30,
    // marginY: 50,
  },
  events:events,
  global: {
    exchange: true,
    ratioCol: 0.3,
  }
})

布局数据 ​

ts
export const layoutData: CustomItems = [
  {pos: {w: 1, h: 1}, resize: false},
  {pos: {w: 1, h: 1}},
  {pos: {w: 1, h: 2, x: 2, y: 1}},
  {pos: {w: 2, h: 1}},
  {pos: {w: 2, h: 2, x: 1, y: 2}},
  {pos: {w: 2, h: 2}},
  {pos: {w: 2, h: 2}, draggable: false},
  {pos: {w: 2, h: 2}, minH: 1, maxW: 2, maxH: 4},
  {pos: {w: 2, h: 1}},
  {pos: {w: 2, h: 1}, maxH: 2},
  {pos: {w: 2, h: 1}},
  {pos: {w: 1, h: 1}},
  {pos: {w: 1, h: 1}},
  {pos: {w: 1, h: 1}},
  {pos: {w: 4, h: 3}},
  {pos: {w: 2, h: 3}},
  {pos: {w: 2, h: 3}},
  {pos: {w: 4, h: 3}},
  {pos: {w: 1, h: 3}},
]
export const layoutData: CustomItems = [
  {pos: {w: 1, h: 1}, resize: false},
  {pos: {w: 1, h: 1}},
  {pos: {w: 1, h: 2, x: 2, y: 1}},
  {pos: {w: 2, h: 1}},
  {pos: {w: 2, h: 2, x: 1, y: 2}},
  {pos: {w: 2, h: 2}},
  {pos: {w: 2, h: 2}, draggable: false},
  {pos: {w: 2, h: 2}, minH: 1, maxW: 2, maxH: 4},
  {pos: {w: 2, h: 1}},
  {pos: {w: 2, h: 1}, maxH: 2},
  {pos: {w: 2, h: 1}},
  {pos: {w: 1, h: 1}},
  {pos: {w: 1, h: 1}},
  {pos: {w: 1, h: 1}},
  {pos: {w: 4, h: 3}},
  {pos: {w: 2, h: 3}},
  {pos: {w: 2, h: 3}},
  {pos: {w: 4, h: 3}},
  {pos: {w: 1, h: 3}},
]