Exemple de code pour le flux en cascade à l'aide de JavaScript et jQuery

Cet article présente principalement la méthode d'implémentation du flux en cascade à l'aide de JavaScript et jQuery, qui a une bonne valeur de référence. Jetons un coup d'œil avec l'éditeur ci-dessous

Une introduction générale

J'ai appris à utiliser js natif et jQuery pour implémenter un flux en cascade sur le MOOC Créer un. notez ici

Utilisez Javascript pour implémenter

Structure de base :

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

Style de base :

*{
 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;
 }

Idée :

1. Obtenez tous les .box sous #. main

2. Calculez le nombre de colonnes pour les images sur la page et définissez la largeur de la page

3. Trouvez la colonne avec la plus petite hauteur parmi ces colonnes

4. Commencez par la deuxième ligne, définissez l'image sur un positionnement relatif et placez une image sous la colonne avec la plus petite hauteur

5 Mettez à jour la hauteur de la colonne, répétez les étapes 3, 4 et. 5 jusqu'à ce que l'image soit chargée

6 , déterminer s'il faut continuer le chargement des images en fonction de la position de la dernière image (chargement paresseux)

Mise en œuvre :

1, Obtenez tous les .box sous #main

  //将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. Calculer combien de colonnes il y a pour les images sur la page et définissez la largeur de la 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. Trouvez la colonne avec la plus petite hauteur parmi celles-ci. colonnes

4 , en commençant par la deuxième ligne, définissez l'image en positionnement relatif et placez une image sous la colonne avec la plus petite hauteur

5. Mettez à jour la hauteur de la colonne, répétez les étapes 3, 4 et 5 jusqu'à ce que l'image soit chargée

//存储每列的高度
  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. Déterminez s'il faut continuer à charger l'image en fonction de la position de la dernière image (Chargement paresseux)

Supposons qu'il s'agisse des données fournies par le background

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

Exécuté lorsque la barre de défilement défile

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

Selon la dernière position de l'image pour déterminer s'il faut charger

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

Charger l'image

//滚动条滚动时执行
 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;);
  }

Utilisez jQurey pour implémenter

Les idées à implémenter en utilisant jQuery sont les mêmes, il suffit de mettre le code directement

$(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>&#39;).attr(&#39;src&#39;,&#39;images/&#39; + $(value).attr(&#39;src&#39;)).appendTo($Pic);
  })
  waterfall();
  }
 }

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!