Implementing waterfall flow with JavaScript and jQuery

Absolute introduction

I learned to use native js and jQuery to implement waterfall flow on MOOC. Take a note here

Implemented with JavaScript

Basic structure:

<div >
 <div class="box">
  <div class="pic"><img src="images/" alt=""></div>
 </div>
 <div class="box">
  <div class="pic"><img src="images/" 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;
 }

Ideas:

1. Get all .boxes under #main

2. Calculate how many columns of the picture are 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 place an image 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 the image based on the position of the last image (lazy loading)

accomplish:

1. Get all .boxes under #main

  //Please all the elements under main class box  var oParent = (parent);
  var oBox = getByClass(oParent,box);

// Get elements according to class function getByClass(parent,clsname){
  var arr = [];// Used to store all the elements obtained with the class box  var oElement = ('*');
  for(var i=0;i&lt;;i++){
  if(oElement[i].className == clsname){
   (oElement[i]);
  }
  }
  return arr;
 }

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

  //Calculate the number of columns displayed on the entire page (page width/box width)  var oBoxW = oBox[0].offsetWidth;
  var cols = (/oBoxW);
  //Set the width of main   = '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 place an image 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

//Storing the height of each column  var hArr = [];
  for(var i=0;i&lt;;i++){
  if(i&lt;cols){
   //The height of the first line of picture   (oBox[i].offsetHeight);
  }else{
   var minH = (null,hArr);
   var index = getMinIndex(hArr,minH);
   oBox[i]. = "absolute";
   oBox[i]. = minH + 'px';
   //oBox[i]. = oBoxW*index+'px';
   oBox[i]. = oBox[index].offsetLeft + 'px';
   //Update the height of each column   hArr[index] += oBox[i].offsetHeight;
  }
  }

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

6. Determine whether to continue loading the image based on the position of the last image (lazy loading)

Assume it is data given by the background

  //data  var dataInt = {'data':[{'src':''},{'src':''},{'src':''},{'src':''}]};

Execute when the scrollbar scrolls

  //When scrolling   = function(){
  scrollSlide(dataInt);
  }

Determine whether to load according to the location of the last picture

//Discribing whether the conditions for scrolling to load data blocks function checkScrollSlide(parent,clsname){
  var oParent = (parent);
  var oBox = getByClass(oParent,clsname);
  var lastBoxH = oBox[-1].offsetTop + (oBox[-1].offsetHeight/2);
  var scrollTop =  || ;
  var height =  || ;
  return (lastBoxH &lt; scrollTop + height)? true:false;
 }

Loading pictures

//Execute when scrolling function scrollSlide(dataInt){
  ///// Determine whether the conditions for scrolling to load data blocks  if(checkScrollSlide('main','box')){
  var oParent = ('main');
  // Render the data block to the end of the current page  for(var i=0;i&lt;;i++){
   var oBoxs = ('div');
    = 'box';
   (oBoxs);
   var oPic = ('div');
    = 'pic';
   (oPic);
   var oImg = ('img');
    = 'images/' + [i].src;
   (oImg);
  }
  waterfall('main','box');
  }

Implemented with jQurey

The idea of using jQuery is the same, just put the code directly

$(window).on('load',function(){
  waterfall();
  var dataInt={'data':[{'src':''},{'src':''},{'src':''},{'src':''}]};
  $(window).on('scroll',function(){
  scrollSlide(dataInt);
  })
 });
 function waterfall(){
  var $oBox = $('#main>div');
  var oBoxW = $(0).outerWidth();
  var cols = ($(window).width()/oBoxW);
  $('#main').css({
  'width' : cols * oBoxW,
  'margin' : '0 auto'
  });
  var hArr = [];
  $(function(index,value){
  var oBoxH = $(index).height();
  if(index<cols){
   (oBoxH);
  }else{
   var minH = (null,hArr);
   var minHIndex = $.inArray(minH,hArr);
   $(value).css({
   'position' : 'absolute',
   'top': minH + 15,
   'left' : $( minHIndex ).position().left
   });
   hArr[minHIndex] += $(index).height() + 15;
  }
  });
 }
 function checkScrollSlide(){
  var $lastBox = $('#main>div').last();
  var lastBoxH = $().top + ($()/2);
  var scrollTop = $(window).scrollTop();
  var clientH = $(window).height();
  return (lastBoxH < scrollTop + clientH) ? true : false;
 }
 function scrollSlide(dataInt){
  if(checkScrollSlide()){
  $.each(,function(index,value){
   var $Box = $('<div>').addClass('box').appendTo('#main');
   var $Pic = $('<div>').addClass('pic').appendTo($Box);
   $('<img>').attr('src','images/' + $(value).attr('src')).appendTo($Pic);
  })
  waterfall();
  }
 }

The above is all the content of this article. I hope that the content of this article will help you study or work. I also hope to support me more!