Columnize 介绍

Columnize creates 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.
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.

Options

The plugin recognizes several options which are denoted in curly brackets.

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.

If you want to prevent nodes from being split at a column break, add the CSS
class ›dontsplit‹ to them.

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

Columnize is licensed under the GNU Lesser General Public License.

Columnize and Columnizer

There is another plugin called Columnizer
(http://plugins.jquery.com/project/Columnizer) which does pretty much the
same task as Columnize. They differ in the layout algorithm used, and also
slightly in the available options.

Since Columnize is a compilation of code I have already used for a couple of
months in different projects (at a time where Columnizer was not yet
released), Columnize was not written to compete with Columnizer. Funny enough,
I initially wanted to release Columnize on 2008-07-18, but then the plan was
delayed for over a month so Columnizer was there first.

Columnize 官网

http://plugins.jquery.com/project/columnize

Columnize