Pinterest-like Responsive Fluid Grid Layout with Pure JavaScript

Preview:

Description:

A pure JavaScript solution used to create a responsive, fluid waterfall grid layout as you see on Pinterest.com.

How to use it:

Load the responsive_waterfall.js JavaScript library at the end of the document.

<script src="responsive_waterfall.js"></script>

Create a grid layout following the Html structure like this:

<div class="wf-container">
  <div class="wf-box"> <img src="1.jpg">
    <div class="content">
      <h3>Title 1</h3>
      <p>Content Here</p>
    </div>
  </div>
  <div class="wf-box"> <img src="2.jpg">
    <div class="content">
      <h3>Title 2</h3>
      <p>Content Here</p>
    </div>
  </div>
  <div class="wf-box"> <img src="3.jpg">
    <div class="content">
      <h3>Title 3</h3>
      <p>Content Here</p>
    </div>
  </div>
  ...
</div>

Custom CSS styles for the grid layout.

.wf-container { margin: 0 auto; }
.wf-container:before,
.wf-container:after {
  content: '';
  display: table;
}
.wf-container:after { clear: both; }
.wf-box { margin: 10px; }
.wf-box img {
  display: block;
  width: 100%;
}
.wf-box .content {
  border: 1px solid #ccc;
  border-top-width: 0;
  padding: 5px 8px;
}
.wf-column { float: left; }

Make the grid layout responsive using CSS3 media queries.

@media screen and (min-width: 768px) {
.wf-container { width: 750px; }
}
@media screen and (min-width: 992px) {
.wf-container { width: 970px; }
}
@media screen and (min-width: 1200px) {
.wf-container { width: 1170px; }
}

Initialize the grid layout and done.

// use querySelector/querySelectorAll internally
var waterfall = new Waterfall({ 
    containerSelector: '.wf-container',
    boxSelector: '.wf-box',
    minBoxWidth: 250
});

Changelog:

07/10/2018

• Use element.remove() fallback for IE compatibility