English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

  1. Location
  2. Home Page
  3. Experience Notes
  4. Main Content

Implementing Waterfall Flow with jQuery3Cases

1. Waterfall FlowThis is a common case we often encounter. Here, we mainly discuss how to implement the waterfall feature using jQuery!

Introduction: We often see the waterfall feature of many websites, such as Taobao, JD and other products...

We first consider several issues to achieve it:1, obtain the data 2, the way of alignment 3, how to achieve alignment

In fact, there is a core function in the waterfall that uses absolute positioning

We will analyze step by step:

This is the html layout, the css layout can be set by yourself, as long as the grid box has absolute positioning, and its parent element has relative positioning! There are reference codes below

Below is the script part

This method can obtain the index value of the picture in order through the for loop, and then continuously change the top and left values in the css style!

When we obtain the picture resources, sometimes the height of the picture is inconsistent. If we keep arranging in order, the last picture will display unevenly, which will not look good!

Continue to read below:

We can use another method to solve this problem by inserting the picture into the shortest column in the current column!

Let's take a close look at the jQuery code below:

Okay, now we have solved the waterfall problem in two ways, but we still have a problem to solve, that is, the main reason for doing the waterfall is because the amount of pictures is very large, and it is a bit low to write html one by one!

Continue to read below:

Below, I introduce a method to obtain json background data using template engine to solve this problem!

1, we only need to build an html box!

2, the box is built, and the data needs to be obtained, rely on it!

3, these are two js libraries that can be downloaded from the internet!

4, below is the specific js part, it needs to be analyzed carefully!

Mainly includes, calling the content obtained from the search engine template, binding functions, and converting it to a jQuery object!

This part mainly includes: obtaining data by sending AJAX requests to the JSON

This part mainly includes: traversing functions, searching for the shortest column arrangement grid!

And here are some more, also part four:

The final step is: the scrolling function, this part is recommended to use console.log to verify in the background, which is easier to understand!

Although the last method is麻烦, but this time it is completed, we can use it many times, and automatically obtain a lot of data!

Below, I attach the original code for everyone to test well. Don't forget to change the image and path!　

The first method uses the original code:　

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 <title>Document</title>
 <style type="text/css">
  *{
   margin: 0;
   padding: 0;
  }
  body{
   background-color: #ccc;
  }
  .waterfall{
   width: 790px;
   /*height: 1000px;*/
   /*border: 1px solid red;*/
   margin: 0 auto;
   position: relative;
  }
  .grid{
   position: absolute;
   width: 230px;
   background-color: white;
   padding: 10px;
   border-radius: 15px;
  }
  .grid img{
   width: 230px;
  }
 </style>
</head>
<body>
 <div class="waterfall">
  <div class="grid">
   <img src="images/0.png" alt="" />
   <p>Content content content content content content content content content content content content content content content</p>
  </div>
  <div class="grid">
   <img src="images/1.png" alt="" />
   <p>Content content content content content content content content content content content content content content content</p>
  </div>
  <div class="grid">
   <img src="images/2.png" alt="" />
   <p>Content content content content content content content content content content content content content content content</p>
  </div>
  <div class="grid">
   <img src="images/3.png" alt="" />
   <p>Content content content content content content content content content content content content content content content</p>
  </div>
  <div class="grid">
   <img src="images/4.png" alt="" />
   <p>Content content content content content content content content content content content content content content content</p>
  </div>
  <div class="grid">
   <img src="images/5.png" alt="" />
   <p>Content content content content content content content content content content content content content content content</p>
  </div>
  <div class="grid">
   <img src="images/6.png" alt="" />
   <p>Content content content content content content content content content content content content content content content</p>
  </div>
  <div class="grid">
   <img src="images/7.png" alt="" />
   <p>Content content content content content content content content content content content content content content content</p>
  </div>
  <div class="grid">
   <img src="images/8.png" alt="" />
   <p>Content content content content content content content content content content content content content content content</p>
  </div>
  <div class="grid">
   <img src="images/9.png" alt="" />
   <p>Content content content content content content content content content content content content content content content</p>
  </div>
  <div class="grid">
   <img src="images/10.png" alt="" />
   <p>Content content content content content content content content content content content content content content content</p>
  </div>
  <div class="grid">
   <img src="images/11.png" alt="" />
   <p>Content content content content content content content content content content content content content content content</p>
  </div>
  <div class="grid">
   <img src="images/12.png" alt="" />
   <p>Content content content content content content content content content content content content content content content</p>
  </div>
 </div>
 <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
 <script type="text/javascript">
  window.onload = function(){
   //Get all the grids
   $grids = $(".grid");
   //
   $grids.each(function(){
    var sum = 0;
    //traverse the total height of the people above it
    for(var i = $(this).index() - 3 ; i >= 0 ; i-=3{
     sum += $grids.eq(i).outerHeight() + 20;
    }
    console.log($(this).index());
    $(this).css({
     "top" : sum,
     "left" : ($(this).index() % 3) * 270
    }
   });
   }
 </script>
</body>
</html>
　

The second method uses the original code:　

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 <title>Document</title>
 <style type="text/css">
  *{
   margin: 0;
   padding: 0;
  }
  body{
   background-color: #ccc;
  }
  .waterfall{
   width: 790px;
   margin: 0 auto;
   position: relative;
  }
  .grid{
   position: absolute;
   width: 230px;
   background-color: white;
   padding: 10px;
   border-radius: 15px;
  }
  .grid img{
   width: 230px;
  }
 </style>
</head>
<body>
 <h3>The algorithm of the waterfall2，see which column is the shortest, and insert it in which column</h3>
 <div class="waterfall">
  <div class="grid">
   <img src="images/0.png" alt="" />
   <p>Content content content content content content content content content content content content content content content</p>
  </div>
  <div class="grid">
   <img src="images/1.png" alt="" />
   <p>Content content content content content content content content content content content content content content content content content content content content content</p>
  </div>
  <div class="grid">
   <img src="images/2.png" alt="" />
   <p>Content content content content content content content content content content content content content content content</p>
  </div>
  <div class="grid">
   <img src="images/3.png" alt="" />
   <p>Content content content content content content content content content content content content content content content</p>
  </div>
  <div class="grid">
   <img src="images/4.png" alt="" />
   <p>Content content content content content content content content content content content content content content content</p>
  </div>
  <div class="grid">
   <img src="images/5.png" alt="" />
   <p>Content content content content content content content content content content content content content content content</p>
  </div>
  <div class="grid">
   <img src="images/6.png" alt="" />
   <p>Content content content content content content content content content content content content content content content</p>
  </div>
  <div class="grid">
   <img src="images/7.png" alt="" />
   <p>Content content content content content content content content content content content content content content content</p>
  </div>
  <div class="grid">
   <img src="images/8.png" alt="" />
   <p>Content content content content content content content content content content content content content content content</p>
  </div>
  <div class="grid">
   <img src="images/9.png" alt="" />
   <p>Content content content content content content content content content content content content content content content</p>
  </div>
  <div class="grid">
   <img src="images/10.png" alt="" />
   <p>Content content content content content content content content content content content content content content content</p>
  </div>
  <div class="grid">
   <img src="images/11.png" alt="" />
   <p>Content content content content content content content content content content content content content content content</p>
  </div>
  <div class="grid">
   <img src="images/12.png" alt="" />
   <p>Content content content content content content content content content content content content content content content</p>
  </div>
 </div>
 <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
 <script type="text/javascript" src="js/underscore.js"></script>
 <script type="text/javascript">
  window.onload = function(){
   //Each grid does not necessarily go to its own serial number%3This column is inserted, see which column is the shortest at the moment, where to insert it=
   //Get all the grids
   $grids = $(".grid");  
    //Store the total height of the current three columns in an array
    var colHeight = [0,0,0]; 
    // console.log(colHeight);
    // Iterate over the small grids
    $grids.each(function(){
     //Find out which column is the shortest currently
     var minValue = _.min(colHeight); //The smallest value in colHeight!
     //Check the position of the shortest column at index
     var minIndex = _.indexOf(colHeight,minValue);//The index of the shortest value
    // console.log(minIndex);
     $(this).css({
      "top" : minValue ,
      "left" : minIndex * 270
     });
     colHeight[minIndex] += $(this).outerHeight() + 20;
     // console.log(colHeight[minIndex]);
    }
   }
 </script>
</body>
</html>
　

The third method is the original code:　

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 <title>Document</title>
 <style type="text/css">
  *{
   margin: 0;
   padding: 0;
  }
  body{
   background-color: #ccc;
  }
  .waterfall{
   width: 790px;
   margin: 0 auto;
   position: relative;
  }
  .grid{
   position: absolute;
   width: 230px;
   background-color: white;
   padding: 10px;
   border-radius: 15px;
  }
  .grid img{
   width: 230px;
  }
  .grid .title{
   font-weight: bold;
   font-size: 18px;
   line-height: 32px;
  }
  .grid .neirong{
   line-height: 150%;
   font-size: 14px;
   margin-bottom: 20px;
  }
  .grid .zuozhe{
   float: right;
   color:orange;
   font-size: 12px;
  }
  .loading{
   margin: 0 auto;
   width: 400px;
   line-height: 30px;
   text-align: center;
   font-size: 14px;
   background-color: gold;
   color:white;
  }
 </style>
</head>
<body>
 <div class="waterfall" id="waterfall">
 </div>
 <div class="loading">
  Loading...
 </div>
 <script type="text/template" id="grid_template">
  <div class="grid">
   <img src="<%=imgurl%>" alt="" />
   <p class="title"><%=title%></p>
   <p class="neirong"><%=content%></p>
   <p class="zuozhe"><%=author%></p>
  </div>
 </script>
 <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
 <script type="text/javascript" src="js/underscore.js"></script>
 <script type="text/javascript">
 // Define variables and objects
  // Get the content sent from the engine template and convert it to a string using jQuery
  var templateString = $("#grid_template").html();
  // Bind the converted string to the compileFunction function!
  var compileFunction = _.template(templateString);//_.template() returns a function!
  // console.log(typeof(compileFunction)); //function
  //Convert it to a jQuery object for later use of jQuery methods
  var $waterfall = $("#waterfall");
  var $loading = $(".loading");
  //Three-column waterfall, the total height of each column
  var colHeight = [0,0,0];
  // This is the height array of three columns, unrelated to the values inside, indicating the order of index
  // console.log(colHeight);
 // Get data
  //semaphore
  var page = 1;
  getJSONandRender(page());
  function getJSONandRender(page){
   // To enhance user experience
   $loading.show();
   //Send an ajax request
   $.get("json/json + page + ".txt",function(data){ //Output string 
    //Convert to object
    var dataObj = eval("(" + data + ")");  //Parse ajax data and convert it to an object!
    //No more data
    // dataObj.news.length comes from the backend json
    if(dataObj.news.length == 0){
     $loading.show().html("No more");
     return; //Here, lock will also end
    }
 // Traverse the function dynamically to obtain the index value according to the absolute positioning position!
    _.each(dataObj.news,function(dictionary){ //Execute the function once every time it is traversed!     
     //This is a built-in system constructor
     var image = new Image(); //Instantiating an object allocates memory space
     // After the object is instantiated, the constructor will immediately execute any code it contains
     image.src = dictionary.imgurl;
     //Now we convert the image to a jQuery object and bind the event
     $(image).load(function(){
      // console.log(dictionary.imgurl + "Loaded");      
      var domString = compileFunction(dictionary);
      // console.log(typeof(domString));
      var $grid = $(domString);
      $waterfall.append($grid);
      //According to the waterfall algorithm, set its left and top
      // minimum value
      minValue = _.min(colHeight);
      // The position of the minimum value!
      minIndex = _.indexOf(colHeight,minValue);
      $grid.css({
       "top" : minValue,
       "left" : minIndex * 270
      });
      //Change the value of the total column height array
      colHeight[minIndex] += $grid.outerHeight(); + 10;
      //Let the large box set the height according to the highest column
      $waterfall.css("height",_.max(colHeight));
      //Hide loading text
      $loading.hide();
     });
    });
    lock = true;
   });
  }
  var lock = true;
  //Listen to scroll
  $(window).scroll(function(){
   if(!lock) return;
   var rate = $(window).scrollTop(); / ($(document).height() - $(window).height());
   if(rate >= 0.7{
    page ++;
    getJSONandRender(page());
    lock = false;
   }
  }
 </script>
</body>
</html>

That's all for this article. I hope it will be helpful to everyone's learning and that everyone will support the Yelling Tutorial more.

Statement: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been manually edited, and does not assume any relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (Please replace # with @ when sending an email to report abuse, and provide relevant evidence. Once verified, this site will immediately delete the infringing content.)

Basic Tutorial
You May Also Like