Pinterest-like Responsive Fluid Grid Layout with Pure JavaScript

Category: Javascript , Layout , Recommended | July 10, 2018
Views Total:10,952 views
Official Page:Go to website
Last Update:July 10, 2018


Pinterest-like Responsive Fluid Grid Layout with Pure JavaScript


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

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 class="wf-box"> <img src="2.jpg">
    <div class="content">
      <h3>Title 2</h3>
      <p>Content Here</p>
  <div class="wf-box"> <img src="3.jpg">
    <div class="content">
      <h3>Title 3</h3>
      <p>Content Here</p>

Custom CSS styles for the grid layout.

.wf-container { margin: 0 auto; }
.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



  • Use element.remove() fallback for IE compatibility

You Might Be Interested In:

Leave a Reply