Responsive Vertical Column Layouts Using jQuery Plugin
- Jquery
- Responsive Design
jQuery Columnizer
Usually, while we add content to a div, it gets arranged accordingly to our web styles. But there are some special cases where we need our contents to be arranged in a vertical manner like the newspaper (or) journal content. To achieve this vertical fashion of content alignment, after a very long and vast search, we found this jQuery plugin to customize the column layouts dynamically based on these plugins:
columnizer.js
isotope.js
Note: This can be easily achieved with the help of Bootstrap themes as in Drupal 7. These plugins are for non-bootstrap theming to achieve this kind of result.
The columnizer plugin is such kind of plugin that aligns our content all into an adaptive layout, which is also responsive and kind of interesting too. It does provide us with a lot of options to get our content aligned in the layout like newspaper material, journal-like stuff and etc.
Now, let us know what we need to do. Just prepare all your HTML documents and download the columnizer plugin from here
To use columnizer, just call the columnize() function on your jQuery selection, and that’s it! we are ready to go.
And we will get our output as :
Now we explore a few more options for columnize.js
Option Name | Purpose |
width | a rough width of your columns, and Columnizer will create as many as will fit in the browser window |
height | This option can only be used in conjunction with the width option. When both the width and height options are set, columns will continue to be built to those measurements to fill all of the content. |
columns | an alternative to the width option. Sets a static number of columns to build, regardless of the widget. |
target | An optional CSS selector may be used here to determine where the columnized content should be placed. If a target is specified, the columnized node will remain unchanged, and the target node will contain columnized content. |
doneFunc | This function will be called when columnizing is complete. |
ignoreImageLoading | true by default. If set to false, Columnizer will try to wait until images in the content have loaded before columnizing the data. |
columnFloat | default is “left”. Change to “right” for the right to left languages. |
lastNeverTallest | false by default. Set to true to ensure that the last column of the columnized content is not the tallest column. |
buildOnce | if buildOnce is false, the content will be re-columnized when the window is resized. If buildOnce is true, the content will only be columnized once. |
overflow | If this option is used, then a static height is set to the columnized content, and any content that does not fit within the height is put into the element specified by $(id). |
height (required): the static height for the columnized content | |
id (required): The id of the element to put the remainder of the content | |
doneFunc (optional): a function to be called after the content has been columnized. This is a great place to columnize the remainder content. | |
manualBreaks | Defaults to false. Set to true if you only want to create columns with manual column breaks. If true, then width, height, and column options are ignored. |
You can know more about the columnize.js here
Now let us explore a few concepts about the isotope.js
This is such a plugin where we have a bundle of options to be utilized for making the dynamic layout of the website.
As this bundle holds a lot of items like
- Masonry
- vertical
- fitRows
which of these are most commonly available with the bundle.
Also, this bundle provides some additional support like
- MasonryHorizontal
- Horizontal
- fitColumn
- Packery
- cellsByRow
- cellsByColumn
where these need to be included as a separate package.
Also, this package supports filtering and sorting features too. In a special case, this plugin doesn’t require any support from the jQuery.js library package.
A sample responsive masonry usage:
To explore and know more about this plugin, please visit: http://isotope.metafizzy.co/