Waterfall

Make Elements flow like waterfall.

defined in: base.js

Class

Attributes

  • Waterfall. adjustEffect {Object} <static> Effect config object when waterfall item is adjusted on window resize.
  • Waterfall. align {String} <static> Horizontal alignment of waterfall items with container.
  • Waterfall. colWidth {Number} <static> Column's width.
  • Waterfall. container {Node} <static> Container which contains waterfall elements.
  • Waterfall. curColHeights {Number[]} <static> Array of height of current waterfall cols.
  • Waterfall. effect {Object} <static> Effect config object when waterfall item is added to container.
  • Waterfall. minColCount {Number} <static> Minimum col count of waterfall items.

Methods

  • Waterfall. addItems (items, callback) <static> Add array of waterfall items to current instance.
  • Waterfall. adjust (callback) <static> Readjust existing waterfall item.
  • Waterfall. adjustItem (item, cfg) <static> Ajust the height of one specified item.
  • Waterfall. destroy () <static> Destroy current instance.
  • Waterfall. isAdding () <static> Whether is adding waterfall item.
  • Waterfall. isAdjusting () <static> Whether is adjusting waterfall items.
  • Waterfall. removeItem (item, cfg) <static> Remove a waterfall item.

Class Detail

  • Waterfall ()
    Make Elements flow like waterfall.

Attributes Detail

  • Waterfall. adjustEffect {Object} <static> Effect config object when waterfall item is adjusted on window resize. Default: { easing:"",duration:1 }
    Example
    • 
           {
               easing:'', // easing type
               duration:1 // unit is second
           }
      
  • Waterfall. align {String} <static> Horizontal alignment of waterfall items with container. Enum: 'left','center','right'.
  • Waterfall. colWidth {Number} <static> Column's width.
  • Waterfall. container {Node} <static> Container which contains waterfall elements.
  • Waterfall. curColHeights {Number[]} <static> Array of height of current waterfall cols.
  • Waterfall. effect {Object} <static> Effect config object when waterfall item is added to container. Default: { effect:"fadeIn",duration:1 }
    Example
    • 
           {
               effect:'fadeIn', // or slideUp
               duration:1 // unit is second
           }
      
  • Waterfall. minColCount {Number} <static> Minimum col count of waterfall items. Event window resize to 0. Default: 1.

Methods Detail

  • Waterfall. addItems (items, callback) <static> view source
    Add array of waterfall items to current instance.
    Parameters
    •   items {NodeList[]} Waterfall items to be added.
    • [ callback ] {Function} Callback function to be called after waterfall items are added.
  • Waterfall. adjust (callback) <static> view source
    Readjust existing waterfall item.
    Parameters
    • [ callback ] {Function} Callback function to be called after adjust.
  • Waterfall. adjustItem (item, cfg) <static> view source
    Ajust the height of one specified item.
    Parameters
    •   item {NodeList} Waterfall item to be adjusted.
    •   cfg {Object} Config object.
    •   cfg.callback {Function} Callback function after the item is adjusted.
    •   cfg.process {Function} Adjust logic function. If returns a number, it is used as item height after adjust. else use item.outerHeight(true) as item height after adjust.
    •   cfg.effect {Object} Same as Waterfall#adjustEffect
    •   cfg.effect.duration {Number}
    •   cfg.effect.easing {String}
  • Waterfall. destroy () <static> view source
    Destroy current instance.
  • Waterfall. isAdding () <static> view source
    Whether is adding waterfall item.
    Since
    1.3
    Returns
    • Boolean
  • Waterfall. isAdjusting () <static> view source
    Whether is adjusting waterfall items.
    Returns
    • Boolean
  • Waterfall. removeItem (item, cfg) <static> view source
    Remove a waterfall item.
    Parameters
    •   item {NodeList} Waterfall item to be removed.
    •   cfg {Object} Config object.
    •   cfg.callback {Function} Callback function to be called after remove.
    •   cfg.effect {Object} Same as Waterfall#adjustEffect
    •   cfg.effect.duration {Number}
    •   cfg.effect.easing {String}
blog comments powered by Disqus
Top