Columns with jQuery, Columnizer plugin | Bypeople

Columns with jQuery, Columnizer plugin

There’s no mystery on saying that one of the most practical way of diagramming content is using columns, either if it’s for print publications, websites, newspapers or something else. Formatting your content to be displayed in columns may seem easy but it actually takes some time before you can master it.

Today we want to share with you one of our recent discoveries, a fancy jQuery plugin named Columnizer (the name says it all). This plugin created by Adam Wulf basically helps you automate the formatting process of any content, saving you a considerable amount of time and offering you a wide range of options for working with columns.


Columnizer will automatically layout all your content in newspaper-like column format; you can also specify either column width or a static amount of columns. On the website you can find all the documentation as well as a couple of nice working examples, another great thing is that the plugin is being constantly updated to fix any bugs or issues that might show up. The plugin offers different customization options, giving you plenty of freedom for you decide which one is the fittest column system for your content.


Since the latest version, the plugin presents the following features:

  • All the JavaScript events that were attached to content before adding the column format are now preserved for non-IE browsers.
  • A new function name doneFunc has been incorporated, this option will be called when the columning process has been completed.
  • Another new option named target that determines where the content should be columned. Since this version you’re able to put all of your content into a hidden div, and have it columned and displayed in it’s final location. This removes the content flicker when the page loads but isn’t still in columns
  • ignoreImageLoading (on by default): When this option is set to false, Columnizer will try to wait until all images in the content are loaded so it can start the columning process. This can help conserve more consistent column heights for all data. The preferred fix is to always specify a width and height for your images in your columned content.
  • The float option lets you specify “left” or “right” floating for columns. Handy for right-to-left languages or simply styling.
  • With the lastNeverTallest Boolean option you can make sure that the last column isn’t going to be the tallest column.

Original link: Columnizer

Related Deals

Related Posts