Pinterest Inspired Layout With Image Lazy Load - jQuery dnWaterfall

dnWaterfall is a lightweight jQuery plugin to create responsive, fluid, cross-platform grid layout inspired by Pinterest.com. Supports image lazy load on page scroll. Responsive layout design based on CSS3 media queries.

How to use it:

1. Include the latest jQuery JavaScript library and the jQuery dnWaterfall plugin's files on the webpage.

<link rel="stylesheet" href="css/style.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>
<script src="js/dnWaterfall.js"></script>

2. Insert your images to the layout as follows. You have to embed the images using the lazy-src attribute for the lazy load functionality.

<div class="dnWaterfall">
  <img class="waterfall-img" lazy-src="1.jpg">
  <img class="waterfall-img" lazy-src="2.jpg">
  <img class="waterfall-img" lazy-src="3.jpg">
  <img class="waterfall-img" lazy-src="4.jpg">
  <img class="waterfall-img" lazy-src="5.jpg">
  <img class="waterfall-img" lazy-src="6.jpg">
  <img class="waterfall-img" lazy-src="7.jpg">
  <img class="waterfall-img" lazy-src="8.jpg">
  <img class="waterfall-img" lazy-src="9.jpg">
  <img class="waterfall-img" lazy-src="10.jpg">
  ...
</div>

3. Call the function on the top container to initialize the plugin.

$(function(){

  $(".dnWaterfall").dnWaterfall();

});

---

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