Beispielcode für einen Wasserfallfluss mit JavaScript und jQuery

In diesem Artikel wird hauptsächlich die Methode zur Implementierung des Wasserfallflusses mithilfe von JavaScript und jQuery vorgestellt, die einen guten Referenzwert hat. Schauen wir es uns mit dem Editor unten an

Eine allgemeine Einführung

Ich habe gelernt, wie man natives js und jQuery verwendet, um den Wasserfallfluss auf MOOC zu implementieren hier

Verwenden Sie Javascript zur Implementierung

Grundstruktur:

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

Grundstil:

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

Idee:

1. Holen Sie sich alle .boxen unter #main

2. Berechnen Sie, wie viele Spalten es für Bilder auf der Seite gibt, und legen Sie die Breite der Seite fest

3. Finden Sie die Spalte mit der kleinsten Höhe unter diesen Spalten

4. Beginnen Sie mit der zweiten Zeile, stellen Sie das Bild auf relative Positionierung ein und platzieren Sie ein Bild unter der Spalte mit der kleinsten Höhe

5. Aktualisieren Sie die Höhe der Spalte, wiederholen Sie die Schritte 3, 4 und 5 bis das Bild geladen ist

6 , Bestimmen Sie anhand der Position des letzten Bildes, ob mit dem Laden von Bildern fortgefahren werden soll (verzögertes Laden)

Implementierung:

1 , Holen Sie sich alle .box unter #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. Berechnen Sie, wie Es gibt viele Spalten für Bilder auf der Seite und legen Sie die Breite der Seite fest

  //计算整个页面显示的列数（页面宽/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. Suchen Sie unter diesen Spalten die Spalte mit der kleinsten Höhe

4 Stellen Sie das Bild ab der zweiten Zeile auf relative Positionierung ein und platzieren Sie ein Bild unter der Spalte mit der kleinsten Höhe

5. Aktualisieren Sie die Höhe der Spalte, wiederholen Sie die Schritte 3, 4 und 5, bis das Bild geladen ist

//存储每列的高度
  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. Bestimmen Sie anhand der Position des letzten Bildes, ob das Laden des Bildes fortgesetzt werden soll (Lazy Loading)

Angenommen, es handelt sich um die durch den Hintergrund vorgegebenen Daten

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

Wird ausgeführt, wenn die Bildlaufleiste scrollt

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

Entsprechend der letzten Bildposition wird bestimmt, ob geladen werden soll

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

Das Bild laden

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

Verwenden Sie jQurey zum Implementieren

Die Ideen zur Implementierung mit jQuery sind die gleichen, geben Sie einfach den Code direkt ein

$(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();
  }
 }

Das obige ist der detaillierte Inhalt vonBeispielcode für einen Wasserfallfluss mit JavaScript und jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!