Responsive Cascading Grid Layout With Pure JavaScript – BrickCols.js

Preview:

Description:

BrickCols.js is a really small JavaScript library that lets you create fully responsive cascading grid layout without any dependencies.

How to use it:

Include the core JavaScript file BrickCols.js just before the closing body tag.

…
  <script src="brickcols.js"></script>
</body>
</html>

The  html structure should be like this.

<element_1 class="wrapper_classes">
  <element_2 class="column_class">
    <element_3 class="block_class" data-priority="priority integer">
      content here
    </element_3>
    <element_3 class="block_class" data-priority="1">
      content here
    </element_3>
    <element_3 class="block_class">
      content here
    </element_3>
    …
    <element_3 class="block_class" data-priority="2">
      content here
    </element_3>
  </element_2>
</element1>

Initialize the grid layout as follow:

BrickCols.layout_optimization('.wrapper_class', '.column_class', '.block_class');