jQuery Plugin For Cross-browser Multi-column Layout - column.js

column.js is a jQuery plugin used for creating cross-browser, news paper-style, multi-column layout where content can be flowed into multiple columns with a gap and a rule between them. Similar to the CSS3 multi-column layout module and works on any web browsers (e.g. Internet Explorer 9).

See also:

• jQuery Plugin To Arrange Images In Magazine-like Layout

How to use it:

1. Include jQuery library and the jQuery column.js plugin on the webpage.

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="jquery.column.js"></script>

2. Just call the plugin and we're ready to go.

$('#column').column({
});

3. Config the multi-column layout with the following options.

$('#column').column({

  // the number of columns an element should be divided into
  'count':    'auto',

  // the gap between the columns
  'gap':      'normal',

  // the color of the rule between columns
  'rule_color': '',

  // the style of the rule between columns
  'rule_style': 'none',

  // the width of the rule between columns
  'rule_width': 'medium',

  // 'word' or 'sentence'
  'split':    'word',

  // a suggested, optimal width for the columns
  'width':    'auto',

  // callbacks
  'after':    null,
  'before':   null
  
});

Change log:

2016-05-26

• Fixes zero columns issue

2016-05-11

• Use detach() instead of empty() to remove elements

---

This awesome jQuery plugin is developed by vanderlee. For more Advanced Usages, please check the demo page or visit the official website.