Realization of waterfall flow with JavaScript and jQuery

A general introduction

I learned to realize waterfall flow with native js and jQuery on massive open online course. Make a note here

Realized with JavaScript

Basic structure:

<div id="main">
 <div class="box">
  <div class="pic"><img src="images/1.jpg" alt=""></div>
 </div>
 <div class="box">
  <div class="pic"><img src="images/2.jpg" alt=""></div>
 </div>
  ...
  ...
  ...
 </div>

Basic style:

*{
 margin: 0px;
 padding: 0px;
 }
 #main{
 position: relative;
 }
 .box{
 padding: 15px 0 0 15px;
 float: left;
 }
 .pic{
 padding: 10px;
 border: 1px solid #ccc;
 border-radius: 5px;
 box-shadow: 0 0 5px #ccc;
 }

Thoughts:

1. Get all under # main. box

2. Calculate the columns of the picture in the page and set the width of the page

3. Find the column with the smallest height among these columns

4. Starting from the second row, set the picture to relative positioning, and put one picture below the column with the smallest height

5. Update the height of the column and repeat steps 3, 4 and 5 until the picture is loaded

6. Determine whether to continue loading pictures according to the position of the last picture (lazy loading)

Achieve:

1. Get all under # main. box

  // Will main All under class For box The elements of are taken out 
  var oParent = document.getElementById(parent);
  var oBox = getByClass(oParent,box);

//  According to class Get Element 
 function getByClass(parent,clsname){
  var arr = [];// Used to store all the acquired class For box Elements of 
  var oElement = parent.getElementsByTagName('*');
  for(var i=0;i<oElement.length;i++){
  if(oElement[i].className == clsname){
   arr.push(oElement[i]);
  }
  }
  return arr;
 }

2. Calculate the columns of the picture in the page and set the width of the page

  // Count the number of columns (page width) displayed on the entire page /box Width of) 
  var oBoxW = oBox[0].offsetWidth;
  var cols = Math.floor(document.documentElement.clientWidth/oBoxW);
  // Settings main Width of 
  oParent.style.cssText = 'width:' + oBoxW*cols + 'px;margin:0 auto;'; 

3. Find the column with the smallest height among these columns

4. Starting from the second row, set the picture to relative positioning, and put one picture below the column with the smallest height

5. Update the height of the column and repeat steps 3, 4 and 5 until the picture is loaded

// Store the height of each column 
  var hArr = [];
  for(var i=0;i<oBox.length;i++){
  if(i<cols){
   // No. 1 1 Height of row picture 
   hArr.push(oBox[i].offsetHeight);
  }else{
   var minH = Math.min.apply(null,hArr);
   var index = getMinIndex(hArr,minH);
   oBox[i].style.position = "absolute";
   oBox[i].style.top = minH + 'px';
   //oBox[i].style.left = oBoxW*index+'px';
   oBox[i].style.left = oBox[index].offsetLeft + 'px';
   // Update the height of each column 
   hArr[index] += oBox[i].offsetHeight;
  }
  }

// Gets the index value with the smallest height per column 
 function getMinIndex(arr,value){
  for(var i in arr){
  if(arr[i] == value){
   return i;
  }
  }
 }

6. Determine whether to continue loading pictures according to the position of the last picture (lazy loading)

Suppose it is the data given by the background

  // Data 
  var dataInt = {'data':[{'src':'1.jpg'},{'src':'2.jpg'},{'src':'3.jpg'},{'src':'4.jpg'}]}; 　　 

Executed when the scroll bar scrolls

  // When the scroll bar scrolls 
  window.onscroll = function(){
  scrollSlide(dataInt);
  } 　　 

According to the position of the last picture, whether to load or not is judged

// It is judged whether there is a condition for rolling bar to load data blocks 
 function checkScrollSlide(parent,clsname){
  var oParent = document.getElementById(parent);
  var oBox = getByClass(oParent,clsname);
  var lastBoxH = oBox[oBox.length-1].offsetTop + Math.floor(oBox[oBox.length-1].offsetHeight/2);
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  var height = document.documentElement.clientHeight || document.body.clientHeight;
  return (lastBoxH < scrollTop + height)? true:false;
 }

Load pictures

*{
 margin: 0px;
 padding: 0px;
 }
 #main{
 position: relative;
 }
 .box{
 padding: 15px 0 0 15px;
 float: left;
 }
 .pic{
 padding: 10px;
 border: 1px solid #ccc;
 border-radius: 5px;
 box-shadow: 0 0 5px #ccc;
 }

0

Realized by jQurey

Using jQuery to achieve ideas are 1, just put the code directly

*{
 margin: 0px;
 padding: 0px;
 }
 #main{
 position: relative;
 }
 .box{
 padding: 15px 0 0 15px;
 float: left;
 }
 .pic{
 padding: 10px;
 border: 1px solid #ccc;
 border-radius: 5px;
 box-shadow: 0 0 5px #ccc;
 }

1