jQuery Columnize is a plugin for the Javascript library jQuery which allows to create a newspaper-like column layout. The original HTML code only needs small adaptions. In most cases, it is not necessary to adapt the HTML code at all.
Documentation
Using the plugin is easy:
$("#text").columnize()
sets the contents of the DOM node with the ID ›text‹ in a two-column layout with balanced column lengths.
The plugin recognizes different options which are denoted in curly brackets.
Options
- balance: ›true‹ if the column lengths should be balanced. ›false‹ if the columns should grow to the height of the containing element. Default: ›true‹
- column: The CSS class which should be applied to columns. Default: ›column‹
- columns: The desired number of columns if balance mode is on. Default: ›2‹
- continued: The CSS class which should be applied to DOM nodes which are continued in the next column. Default: ›continued‹
Tips
If balance mode is off, the element to which the column layout should be applied has to define a maximum height via the CSS property ›max-height‹. The columns will then grow to at most this height.
If balance mode is on, the maximum height is taken into account, too. If balancing the column lengths would exceed the maximum height the plugin automatically disables balance mode. In this case, the plugin creates more columns than specified in the columns option.
The column width is derived from the CSS properties of the columns. You can control the width using the CSS class specified in the columns option.. Typical properties for a column are the following:
float: left
width: 200px
margin-right: 1em
For a beautiful layout it is recommended to use the CSS property ›line-height‹. By setting the line height explicitly and calculate all vertical distances as multiples of the line height you ensure that all baselines are aligned to the same grid.
Examples
- $("#text").columnize({columns: 3})
Three columns with balanced column lengths. - $("#text").columnize({columns: 3, balanced: false})
Three columns with balanced column lengths if the column lengths do not exceed the maximum height of the containing element. In this case, the plugin abandons the limitation to three columns and creates as many columns as needed for the text. - $("#text").columnize({balanced: false})
Columns grow until the maximum height of the containing element. The number of columns is determined by the amount of text.
License
jQuery Columnize is a contribution to the jQuery community and is therefore distributed as open source software. The plugin is licensed under the GNU Lesser General Public License.
Download
Please go to the project website in the jQuery plugin repository to download the latest release.
--> website