Sample code for waterfall flow using JavaScript and jQuery

This article mainly introduces the method of implementing waterfall flow using JavaScript and jQuery, which has a very good reference value. Let’s take a look at it with the editor.

General introduction

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

Use Javascript to implement

Basic structure:

<p id="main">
 <p class="box">
  <p class="pic"><img src="/static/imghwm/default1.png"  data-src="images/1.jpg"  class="lazy"   alt=""></p>
 </p>
 <p class="box">
  <p class="pic"><img src="/static/imghwm/default1.png"  data-src="images/2.jpg"  class="lazy"   alt=""></p>
 </p>
  ...
  ...
  ...
 </p>

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 .box

under #main 2. Calculate how many columns there are for pictures on 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, put a picture below the column with the smallest height

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

6. According to the last The position of the picture determines whether to continue loading the picture (lazy loading)

Implementation:

1. Get #main All the .box

  //将main下的所有class为box的元素取出来
  var oParent = document.getElementById(parent);
  var oBox = getByClass(oParent,box);

// 根据class获取元素
 function getByClass(parent,clsname){
  var arr = [];//用来存储获取到的所有class为box的元素
  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 number of columns of pictures on the page and set the width of the page

  //计算整个页面显示的列数（页面宽/box的宽）
  var oBoxW = oBox[0].offsetWidth;
  var cols = Math.floor(document.documentElement.clientWidth/oBoxW);
  //设置main的宽
  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 image to relative Position, put an image below the column with the minimum height

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

//存储每列的高度
  var hArr = [];
  for(var i=0;i<oBox.length;i++){
  if(i<cols){
   //第一行图片的高度
   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 + &#39;px&#39;;
   //oBox[i].style.left = oBoxW*index+&#39;px&#39;;
   oBox[i].style.left = oBox[index].offsetLeft + &#39;px&#39;;
   //更新每列的高度
   hArr[index] += oBox[i].offsetHeight;
  }
  }

//获取每列高度最小的索引值
 function getMinIndex(arr,value){
  for(var i in arr){
  if(arr[i] == value){
   return i;
  }
  }
 }

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

Assumption It is the data given by the background

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

It is executed when the scroll bar scrolls

  //滚动条滚动时
  window.onscroll = function(){
  scrollSlide(dataInt);
  }　　

Determine whether to load based on the position of the last picture

//判断是否具有了滚条加载数据块的条件
 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 the picture

//滚动条滚动时执行
 function scrollSlide(dataInt){
  ////判断是否具有了滚条加载数据块的条件
  if(checkScrollSlide('main','box')){
  var oParent = document.getElementById('main');
  //将数据块渲染到当前页面的尾部
  for(var i=0;i<dataInt.data.length;i++){
   var oBoxs = document.createElement(&#39;p&#39;);
   oBoxs.className = &#39;box&#39;;
   oParent.appendChild(oBoxs);
   var oPic = document.createElement(&#39;p&#39;);
   oPic.className = &#39;pic&#39;;
   oBoxs.appendChild(oPic);
   var oImg = document.createElement(&#39;img&#39;);
   oImg.src = &#39;images/&#39; + dataInt.data[i].src;
   oPic.appendChild(oImg);
  }
  waterfall(&#39;main&#39;,&#39;box&#39;);
  }

Using jQurey to implement

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

$(window).on('load',function(){
  waterfall();
  var dataInt={'data':[{'src':'1.jpg'},{'src':'2.jpg'},{'src':'3.jpg'},{'src':'4.jpg'}]};
  $(window).on('scroll',function(){
  scrollSlide(dataInt);
  })
 });
 function waterfall(){
  var $oBox = $('#main>p');
  var oBoxW = $oBox.eq(0).outerWidth();
  var cols = Math.floor($(window).width()/oBoxW);
  $('#main').css({
  'width' : cols * oBoxW,
  'margin' : '0 auto'
  });
  var hArr = [];
  $oBox.each(function(index,value){
  var oBoxH = $oBox.eq(index).height();
  if(index<cols){
   hArr.push(oBoxH);
  }else{
   var minH = Math.min.apply(null,hArr);
   var minHIndex = $.inArray(minH,hArr);
   $(value).css({
   &#39;position&#39; : &#39;absolute&#39;,
   &#39;top&#39;: minH + 15,
   &#39;left&#39; : $oBox.eq( minHIndex ).position().left
   });
   hArr[minHIndex] += $oBox.eq(index).height() + 15;
  }
  });
 }
 function checkScrollSlide(){
  var $lastBox = $(&#39;#main>p&#39;).last();
  var lastBoxH = $lastBox.offset().top + Math.floor($lastBox.height()/2);
  var scrollTop = $(window).scrollTop();
  var clientH = $(window).height();
  return (lastBoxH < scrollTop + clientH) ? true : false;
 }
 function scrollSlide(dataInt){
  if(checkScrollSlide()){
  $.each(dataInt.data,function(index,value){
   var $Box = $(&#39;<p>&#39;).addClass(&#39;box&#39;).appendTo(&#39;#main&#39;);
   var $Pic = $(&#39;<p>&#39;).addClass(&#39;pic&#39;).appendTo($Box);
   $(&#39;<img  alt="Sample code for waterfall flow using JavaScript and jQuery" >&#39;).attr(&#39;src&#39;,&#39;images/&#39; + $(value).attr(&#39;src&#39;)).appendTo($Pic);
  })
  waterfall();
  }
 }

The above is the detailed content of Sample code for waterfall flow using JavaScript and jQuery. For more information, please follow other related articles on the PHP Chinese website!