Free Wall

Options

All options are parameters of Reset method

• draggable : boolean

  Default: false
  True: to make block can be drag & drop

• animate : boolean

  True: to make block move with animation

• cellW: mix

  Default: 100
  The width of unit, base on it will build grid container. It can be a function and return value.

  Example

  										
  var wall = new Freewall('.free-wall');
  wall.reset({
    selector: '.brick',
    cellW: function(width) {
        var cellWidth = width / 3;
        return cellWidth - 20;
      },
    cellH: 160
  });
  										
  									

• cellH: mix

  Default: 100
  The height of unit, base on it will build grid container. It can be a function and return value.

• delay : number

  Default: 0
  The time delay for show block. It will increase by each block.

• fixSize : boolean

  Default: null
  value is null or not set let blocks can adjust and resize to fill gap
  value is 0 or false let blocks can adjust size but can't resize to fill gap.
  value is 1 or true let blocks keep the size as init, can't resize to fill gap.
  Can override the fixSize option by set data-fixSize attribute in the block.

  Example

  										
  <div class="brick size22" data-fixSize=true>
    <div class='cover'>
      <div class="item size12"></div>
      <div class="item size12"></div>
    </div>
  </div>
  										
  									

• gutterX : mixed

  Default: 10
  The horizon spacing between the column. Default is number, but can set it with 'auto' value.

• gutterY : mixed

  Default: 10
  The vertical spacing between the row. Default is number, but can set it with 'auto' value.

• selector : string

  Get all blocks to made layout

• Example

  									
  var wall = new Freewall('.free-wall');
  wall.reset({
    selector: '.brick',
    animate: true,
    cellW: 150,
    cellH: 150,
    gutterY: 10,
    gutterX: 'auto'
  });
  									
  								

• cacheSize : boolean

  Default: true
  True: will caches the with and height of block for next time

• keepOrder : boolean

  Keep the order as same as HTML structure

• rightToLeft : boolean

  Default: false
  True: let layout start render from right to left

• bottomToTop : boolean

  Default: false
  True: let layout start render from bottom up to top