javascript实现瀑布流动态加载图片

这篇文章主要为大家详细介绍了javascript实现瀑布流动态加载图片原理，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了js瀑布流加载效果，动态加载图片，供大家参考，具体内容如下

鼠标滚动事件，当鼠标滚动到下边，动态加载图片。

1. HTML代码    

nbsp;html>

 
  <meta>
  <title>js实现瀑布流效果-动态加载图片</title>
  <link>
  <script></script>
 
 
  <p>
   </p><p>
    </p><p>
     @@##@@
    </p>
   
   <p>
    </p><p>
     @@##@@
    </p>
   
   <p>
    </p><p>
     @@##@@
    </p>
   
   <p>
    </p><p>
     @@##@@
    </p>
   
   <p>
    </p><p>
     @@##@@
    </p>
   
   <p>
    </p><p>
     @@##@@
    </p>
   
   <p>
    </p><p>
     @@##@@
    </p>
   
   <p>
    </p><p>
     @@##@@
    </p>
   
   <p>
    </p><p>
     @@##@@
    </p>
   
   <p>
    </p><p>
     @@##@@
    </p>
   
   <p>
    </p><p>
     @@##@@
    </p>
   
   <p>
    </p><p>
     @@##@@
    </p>
   
   <p>
    </p><p>
     @@##@@
    </p>
   
   <p>
    </p><p>
     @@##@@
    </p>
   
   <p>
    </p><p>
     @@##@@
    </p>
   
   <p>
    </p><p>
     @@##@@
    </p>
   
    
  
 

2. CSS代码    

*{
 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代码    

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@@##@@<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 function><p></p>
<p>以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！</p>
<p>相关推荐：</p>
<p><a title="jQuery和CSS3折叠卡片式下拉列表框实现效果" href="http://www.php.cn/js-tutorial-404914.html" target="_blank">jQuery和CSS3折叠卡片式下拉列表框实现效果</a><br></p>
<p><a title="JavaScript实现使用Canvas绘制图形" href="http://www.php.cn/js-tutorial-404908.html" target="_blank">JavaScript实现使用Canvas绘制图形</a><br></p>
<p></p>
<p class="clearfix"><span class="jbTestPos"></span></p>
<img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><imgdata.data.length><img></imgdata.data.length></scrolltop>

Java免费学习笔记：立即学习
解锁 Java 大师之旅：从入门到精通的终极指南