Pinterest Inspired Layout With Image Lazy Load - jQuery dnWaterfall

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.

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.

  • Publication date: 23.03.2018
  • Source