Skip to main content
knackforge blog knowledge base

Responsive vertical column layouts using jQuery Plugin

Usually while we add contents to a div, it get arranged accordingly to our web styles. But there are some special cases where we need our contents to be arranged in a vertical manner as like the newspaper (or) journal content. To achieve this vertical fashion of content alignment, after a very long and vast search, we found these jQuery plugin to customize the column layouts dynamically based on these plugins:

  • columnizer.js
  • isotope.js

Note: This can be easily acheived with the help of Bootstrap themes as in Drupal 7. These plugin are for the non-bootstrap theming to achieve this kind of result.The columnizer plugin is such kind of plugin which aligns our content all into a adaptive layout, which is also responsive and kind of interesting too. It does provide us 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's all we need to do are these. Just prepare all your html document 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.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.columnizer.js"></script>
<script type="text/javascript">
$(function(){
  $('.wide').columnize({width:400});
  $('.thin').columnize({width:200});
});
</script>

And we will get our output as : columnize.png Now we explore a few more options for columnize.js Option NamePurposewidtha rough width your columns, and Columnizer will create as many as will fit in the browser windowheightThis 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. columnsan alternative to the width option. Sets a static number of columns to build, regardless of widget.targetAn 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.doneFuncThis function will be called when columnizing is complete.ignoreImageLoadingtrue by default. If set to false, Columnizer will try to wait until images in the content have loaded before columnizing the data.columnFloatdefault is “left”. Change to “right” for right to left languages.lastNeverTallestfalse by default. Set to true to ensure that the last column of the columnized content is not the tallest column.buildOnceif 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.overflowIf 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 contentid (required): The id of the element to put the remainder of the contentdoneFunc (optional): a function to be called after the content has been columnized. This is a great place to columnize the remainder content.manualBreaksDefaults to false. Set to true if you only want to create columns with manual column breaks. If true, then width, height, columns options are ignored. You can know more about the columnize.js here Now let us explore few concepts about the isotope.js

  • This is such a plugin where we have a bundle of option to be utilized for making the dynamic layout of the website.
  • As this bundle holds a lot of items like
    1. Masonry
    2. vertical
    3. fitRows

which of these are most commonly available with the bundle.

  • Also this bundle provides some additional supports like
    1. MasonryHorizontal
    2. Horizontal
    3. fitColumn
    4. Packery
    5. cellsByRow
    6. cellsByColumn

where these needs 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: responsive-jquery-masonry-2.jpg To explore and know more about this plugin, please visit: http://isotope.metafizzy.co/ 

Add new comment

The content of this field is kept private and will not be shown publicly.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.