Pinterest Style Responsive Web Layout Plugin For jQuery - newWaterfall.js

newWaterfall.js is a tiny (~3kb unminified), fast jQuery plugin that creates a responsive, fluid, Pinterest-style waterfall grid layout to present your web content in an unique manner. The plugin has the ability to re-arrange grid items on window resize. Works perfectly on any devices.

How to use it:

1. Create an html list for the Pinterest-style grid layout.

<ul id="waterfall">  
  <li>
    <div>Content goes here</div>
  </li>
  <li>
    <div>Content goes here</div>
  </li>
  <li>
    <div>Content goes here</div>
  </li>
  ...
</ul>  

2. Put jQuery library and the main JavaScript file newWaterfall.js at the end of the document to improve the page load speed.

<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="newWaterfall.js"></script>

3. Style the grid layout using your own CSS experiences.

#waterfall { margin: 10px; }

#waterfall li {
  left: 0;
  top: 0;
  opacity: 0;
  transform: translateY(100px);
}

#waterfall li.show {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.3s, top 1s;
}

#waterfall li > div {
  color: rgba(0,0,0,0.6);
  font-size: 32px;
  border-radius: 3px;
  margin: 10px;
  padding: 15px;
  background: rgb(255,255,255);
  border: 1px solid rgba(038, 191, 64, 0);
  transition: all 0.5s;
}

#waterfall li > div:hover {
  transform: translateY(-10px);
  border: 1px solid rgba(038, 191, 64, 1);
  box-shadow: 0 10px 15px rgba(038, 191, 64, 0.1);
  transition: all 0.3s;
}

4. Run the NewWaterfall() function on document ready.

$('#waterfall').NewWaterfall();

5. Possible plugin options.

$('#waterfall').NewWaterfall({

  // width of grid item
  width: 360,

  // refresh delay
  delay: 60,

  // By default, the plugin will add the class 'show' to grid item when in viewport
  // setting the options to true will remove the class when out of the viewport
  repeatShow: false
  
});

Change log:

2017-04-09

• JS update

2016-10-30

• improvement.

---

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