The Columnizer is a well designed, cross browser and multi-functional column layout plugin for jQuery. It helps you to create CSS newspaper column layout dynamically. The plugin requires nothing tough, it automatically layout your content in newspaper column format. You can define either column width or a fixed number of columns for your web page layout.
Moreover, the plugin comes with multiple options and a number of built-in newspaper layouts. You can browse all newspaper layouts through demo page.
Plugin Overview
| Plugin: | Columnizer |
| Author: | Adam Wulf |
| Licence: | MIT Licence |
| Published: | January 19, 2024 |
| Repository: | Fork on GitHub |
| Dependencies: | jQuery 1.3.1 or Latest version |
| File Type: | zip archive (HTML, CSS & JavaScript ) |
| Package Size: | 164 KB |
How to Create Newspaper Column Layout
1. To getting started with newspaper column layout, first of all load jQuery and Columnizer JavaScript file into your HTML document.
<!-- jQuery --> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <!-- Columnizer JS --> <script src="src/jquery.columnizer.js"></script><script>
2. After that, create some paragraphs and other HTML elements (like images, headings etc) like the following.
<div id="wrapper">
<div class="wide">
<h1>A True Newspaper Layout</h1>
<p>All of the content in this layout is auto-overflowing from the top columns into the bottom columns. View the source to check it out!</p>
<p>Some sample text...</p>
<p>Some other peragraph...</p>
.........
.........
.........
</div>
</div>
3. Finally, initialize the plugin in jQuery document ready function to columnizing your contents like newspaper layout.
$(document).ready(function(){
$('.wide').columnize({
width : 500,
buildOnce : true,
});
});
Advance Configuration Options for CSS Newspaper Column Layout
The following are some advance configuration options to create / customize “Newspaper Column Layout”.
| Option | Description, Default, Type |
|---|---|
width |
This option useful to define rough width for a column. The plugin will create columns as many as window width. Default: 400, Type: Number.
$('.wide').columnize({
width: 400,
});
|
buildOnce |
Decide weather to rebuild column layout on window resize. Best for responsive layout. Default: false, Type: Boolean.
$('.wide').columnize({
buildOnce : false,
});
|
overflow |
Enable / disable overflow. Default: false, Type: Boolean.
$('.wide').columnize({
overflow : false,
});
|
columnFloat |
Define the CSS floating property for columns. Default: ‘left’, Type: String.
$('.wide').columnize({
columnFloat : "left",
});
|
manualBreaks |
This option useful to enable / disable automatically layout columns. Default: false, Type: Boolean.
$('.wide').columnize({
manualBreaks : false,
});
|
Similar Code Snippets:
JavaScript Timesheet Calculator
A Simple jQuery Quiz App
I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.