Summary

Views Blocksit style plugin. Create dynamic grid layouts using the Blocksit JS jQuery plugin and Views. This module supports setting up breakpoints to change the number of columns as required. Blocksit JS provides a cascading grid layout, similar to that of the Masonry JS library and can be used as an alternative in many cases.

A demo of the library is available here.

Installation

  1. Download and extract the module sites/all/modules
  2. Download the Blocksit JS library and put either blocksit.js or blocksit.min.js in the sites/all/libraries/blocksit folder.

A note about breakpoints

If required, breakpoints can be set up for the number of columns to change at a set container width. To do this, the "Breakpoints" setting needs to be configured using the following format and having the breakpoints ordered from largest width to lowest width.

[container_width_in_px, number_of_columns] [container_width, number_of_columns]

For Example:

[1200, 5] [1000, 4] [800, 3] [600, 2] [400, 1]

All whitespace is striped, so spacing is not important, however the commas and square brackets are required. Please also note that the breakpoint width is the container width, not the page width. Javascript is used to change the number of columns so it is advised to only have the number of breakpoints that you need for optimal performance, particularly on mobile.

How to Use

  1. Edit the required view.
  2. Under "Format" set the view to "Blocksit".
  3. Configure the settings as required, listing any breakpoints needed (as per above).
Supporting organizations: 

Project information

Releases