jQuery Plugin For Newspaper Column Layout - Columnizer

Columnizer is a responsive jQuery plugin for generating a newspaper column layouts that automatically splits your 1 div of content into as many columns as will fit the user's browser.  

If the browser is resized, columns will be automatically added or removed appropriately.

Basic Usage:

1. Include jQuery library and jQuery Columnizer plugin in the head section of the page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.columnizer.js"></script>

2. Markup html structure

<div id="wrapper">
<div class="wide">
<h1>Headling 1</h1>
<p>...</p>
<h1>Headling 2</h1>
<p>...</p>
<h1>Headling 3</h1>
<p>...</p>
...
</div>
<div class="thin">
<h1>Headling 1</h1>
<p>...</p>
<h1>Headling 2</h1>
<p>...</p>
<h1>Headling 3</h1>
<p>...</p>
...
</div>
</div>

3. Initialize the plugin

<script>
$(function(){
$('.wide').columnize({width:400}); // a rough width your columns
$('.thin').columnize({width:200});
});
</script>

4. All the options

// default width of columns
width: 400,
// optional # of columns instead of width
columns : false,
// true to build columns once regardless of window resize
// false to rebuild when content box changes bounds
buildOnce : false,
// an object with options if the text should overflow
// it's container if it can't fit within a specified height
overflow : false,
// this function is called after content is columnized
doneFunc : function(){},
// if the content should be columnized into a
// container node other than it's own node
target : false,
// re-columnizing when images reload might make things
// run slow. so flip this to true if it's causing delays
ignoreImageLoading : true,
// should columns float left or right
columnFloat : "left",
// ensure the last column is never the tallest column
lastNeverTallest : false,
// (int) the minimum number of characters to jump when splitting
// text nodes. smaller numbers will result in higher accuracy
// column widths, but will take slightly longer
accuracy : false,
// false to round down column widths (for compatibility)
// true to conserve all decimals in the column widths
precise : false,
// don't automatically layout columns, only use manual columnbreak
manualBreaks : false,
// disable single column layout when container width < columnWidth
// (useful for horizontally scrollable columns in mobile view)
disableSingle : false,
// previx for all the CSS classes used by this plugin
// default to empty string for backwards compatibility
cssClassPrefix : "",
elipsisText:'...',
debug:0	

Changelog:

2019-08-20

• Fix for jQuery deprecation of event shorthand: resize

2017-01-09

• add disableSingle option

2016-01-28

• fixed empty <table> at end of column

2015-02-17

• fixed empty <table> at end of column

2014-07-02

• added options.precise, true <=> no Math.floor on column width (default false)

2014-04-16

• Fixed: doneFunc not firing

---

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