Pinterest-like Responsive Grid System with jQuery - jaliswall

Just another jQuery implementation of the familiar Pinterest-like responsive, fluid grid system that dynamically adjusts the number of columns according to the width set in the CSS.

How to use it:

1. The required markup structure for the grid system.

<div class="wall">
  <a class="wall-item" href="#">
    <img src="1.jpg">
    <h2>wall-item 1</h2>
  </a>

  <a class="wall-item" href="#">
    <img src="2.jpg">
    <h2>wall-item 2</h2>
  </a>

  <a class="wall-item" href="#">
    <img src="3.jpg">
    <h2>wall-item 3</h2>
  </a>

  ...
  
</div>

2. Style the grid system.

.wall-item {
  display: block;
  margin: 0 0 30px 0;
  padding: 12px;
  background: white;
  border-radius: 3px;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
  transition: all 220ms;
}

.wall-item:hover {
  box-shadow: 0px 2px 3px 1px rgba(0, 0, 0, 0.1);
  transform: translateY(-5px);
  transition: all 220ms;
}

.wall-item > img {
  display: block;
  width: 100%;
  margin: 0 0 24px 0;
}

.wall-item h2 {
  text-align: center;
  font-size: 14px;
  text-transform: uppercase;
  margin: 0 0 12px 0;
}

.wall {
  display: block;
  position: relative;
}

.wall-column {
  display: block;
  position: relative;
  width: 33.333333%;
  float: left;
  padding: 0 12px;
  box-sizing: border-box;
}

3. Make it responsive.

@media (max-width: 640px) {

.wall-column { width: 50%; }

}

@media (max-width: 480px) {

.wall-column {
  width: auto;
  float: none;
}

}

4. Load the latest jQuery library and the jQuery jaliswall plugin at the bottom of the web page.

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script> 
<script src="jaliswall.js"></script>

5. Initialize the grid system by calling the function on the top element.

$('.wall').jaliswall();

6. Possible plugin options.

$('.wall').jaliswall({
  
  // item classname
  item : '.wall-item',

  // column classname
  columnClass : '.wall-column'
  
});

---

This awesome jQuery plugin is developed by pierre-bonnin-pro. For more Advanced Usages, please check the demo page or visit the official website.