Heim > Artikel > Web-Frontend > Javascript implementiert den Wasserfallfluss, um Bilder dynamisch zu laden

Javascript implementiert den Wasserfallfluss, um Bilder dynamisch zu laden

不言Original: 2018-06-25 15:27:012465Durchsuche

In diesem Artikel wird hauptsächlich das Prinzip des dynamischen Ladens von Bildern mithilfe von JavaScript zur Implementierung des Wasserfallflusses vorgestellt. Es hat einen gewissen Referenzwert.

Das Beispiel dieses Artikels teilt die js Wasserfall mit allen. Stream-Ladeeffekt, dynamisches Laden von Bildern. Als Referenz lautet der spezifische Inhalt wie folgt:

Maus-Scroll-Ereignis: Wenn die Maus nach unten scrollt, werden Bilder dynamisch geladen.

1. HTML-Code

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>js实现瀑布流效果-动态加载图片</title>
  <link rel="stylesheet" href="css/waterfallflow.css" type="text/css" />
  <script src="js/waterfallflow.js"></script>
 </head>
 <body>
  <p id="container">
   <p class="box">
    <p class="box_img">
     <img src="img/1.jpg" />
    </p>
   </p>
   <p class="box">
    <p class="box_img">
     <img src="img/2.jpg" />
    </p>
   </p>
   <p class="box">
    <p class="box_img">
     <img src="img/3.jpg" />
    </p>
   </p>
   <p class="box">
    <p class="box_img">
     <img src="img/4.jpg" />
    </p>
   </p>
   <p class="box">
    <p class="box_img">
     <img src="img/5.jpg" />
    </p>
   </p>
   <p class="box">
    <p class="box_img">
     <img src="img/6.jpg" />
    </p>
   </p>
   <p class="box">
    <p class="box_img">
     <img src="img/7.jpg" />
    </p>
   </p>
   <p class="box">
    <p class="box_img">
     <img src="img/3.jpg" />
    </p>
   </p>
   <p class="box">
    <p class="box_img">
     <img src="img/1.jpg" />
    </p>
   </p>
   <p class="box">
    <p class="box_img">
     <img src="img/2.jpg" />
    </p>
   </p>
   <p class="box">
    <p class="box_img">
     <img src="img/1.jpg" />
    </p>
   </p>
   <p class="box">
    <p class="box_img">
     <img src="img/2.jpg" />
    </p>
   </p>
   <p class="box">
    <p class="box_img">
     <img src="img/3.jpg" />
    </p>
   </p>
   <p class="box">
    <p class="box_img">
     <img src="img/4.jpg" />
    </p>
   </p>
   <p class="box">
    <p class="box_img">
     <img src="img/5.jpg" />
    </p>
   </p>
   <p class="box">
    <p class="box_img">
     <img src="img/6.jpg" />
    </p>
   </p>
    
  </p>
 </body>
</html>

2. CSS-Code

*{
 margin: 0px;
 padding: 0px;
}
#container{
 position: relative;
}
.box{
 padding: 5px;
 float: left;
 margin: 0px auto;
}
.box_img{
 padding: 5px;
 border: 1px solid #DCDCDC;
 box-shadow: 0 0 5px #ccc;
 border-radius: 5px;
}
.box_img img{
 width: 230px;
}

3. JavaScript-Code

window.onload=function(){
  
 imgLocation("container","box");
 var imgData={"data":[{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"}]}
 window.onscroll=function(){
//  console.log(document.documentElement.scrollTop);
  if(checkFlag()){
   var cparent=document.getElementById("container");
   for(var i=0;i<imgData.data.length;i++){
    var ccontent=document.createElement("p");
    ccontent.className="box";
    cparent.appendChild(ccontent);
    var boximg=document.createElement("p");
    boximg.className="box_img";
    ccontent.appendChild(boximg);
    var img=document.createElement("img");
    img.src="img/"+imgData.data[i].src;
    boximg.appendChild(img);
     
    //另外一种方法在p后边追加内容，不覆盖原有内容
//    var content="<p class=&#39;box&#39;><p class=&#39;box_img&#39;><img src=&#39;img/"+imgData.data[i].src+"&#39;/></p></p>";
//    cparent.innerHTML+=content;
   }
   imgLocation("container","box");
  }
 }
}
 
function checkFlag(){
 var cparent=document.getElementById("container");
 var ccontent=getChildElement(cparent,"box");//图片的所有box数
 var lastContentHeight=ccontent[ccontent.length-1].offsetTop;//最后一张图片距离顶部高度
 var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;//滚动条距离顶部高度
 var pageHeight=document.documentElement.clientHeight||document.body.clientHeight;//屏幕高度
// console.log(lastContentHeight+","+scrollTop+","+pageHeight);
 if(lastContentHeight<scrollTop+pageHeight){
  return true;
 }
}
 
function imgLocation(parent,content){
 var cparent=document.getElementById(parent);
 var ccontent=getChildElement(cparent,content);//图片的所有box数
 var imgWidth=ccontent[0].offsetWidth;//图片宽度
 var num=Math.floor(document.documentElement.clientWidth/imgWidth);//一行放图片个数
 cparent.style.cssText="width:"+imgWidth*num+"px;margin:0px auto";//container的宽度
 var boxHeightArr=[];//每一列box高度
 for(var i=0;i<ccontent.length;i++){
  if(i<num){
   boxHeightArr[i]=ccontent[i].offsetHeight;
  }else{
   var minHeight=Math.min.apply(null,boxHeightArr);//最小高度
   var minIndex = getMinheightLocation(boxHeightArr,minHeight);//得到最小高度下标
//   console.log(minHeight+","+minIndex);
   ccontent[i].style.position="absolute";
   ccontent[i].style.top=minHeight+"px";//距离顶部高度
   ccontent[i].style.left=ccontent[minIndex].offsetLeft+"px";//距离左边长度
   boxHeightArr[minIndex]+=ccontent[i].offsetHeight;
//   console.log(ccontent[i].offsetHeight+","+ccontent[i].height);//ccontent[i].height=undefined
    
  }
 }
}
 
function getMinheightLocation(boxHeightArr,minHeight){
 for(var i in boxHeightArr){
  if(boxHeightArr[i]==minHeight){
   return i
  }
 }
}
 
function getChildElement(parent,content){
 //将parent下有content的全部取出
 var contentArr=[];
 var allContent=parent.getElementsByTagName("*");
 for(i=0;i<allContent.length;i++){
  if(allContent[i].className=="box"){
   contentArr.push(allContent[i]);
  }
 }
 return contentArr;
}

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

JQuery- und CSS3-Klappkarten-Dropdown-Listenfeld, um den Effekt zu erzielen

JavaScript zur Verwendung Leinwand zum Zeichnen von Grafiken

Das obige ist der detaillierte Inhalt vonJavascript implementiert den Wasserfallfluss, um Bilder dynamisch zu laden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Klappkarten-Dropdown-Listenfeld für jQuery und CSS3, um einen Effekt zu erzielenNächster Artikel：Klappkarten-Dropdown-Listenfeld für jQuery und CSS3, um einen Effekt zu erzielen

In Verbindung stehende Artikel

Mehr sehen