Pinterest Inspired Layout With Image Lazy Load - jQuery dnWaterfall

File Size: 1.17 MB
Views Total: 4785
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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 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="" 
<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">

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




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