DDR爱好者之家

javascript实现瀑布流动态加载图片原理
站长资源 2025/3/17 佚名
29 1538
DDR爱好者之家 Design By 杰米

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

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

1. HTML代码     

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>js实现瀑布流效果-动态加载图片</title>
  <link rel="stylesheet" href="css/waterfallflow.css" type="text/css" />
  <script src="/UploadFiles/2021-04-02/waterfallflow.js">


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<imgData.data.length;i++){
    var ccontent=document.createElement("div");
    ccontent.className="box";
    cparent.appendChild(ccontent);
    var boximg=document.createElement("div");
    boximg.className="box_img";
    ccontent.appendChild(boximg);
    var img=document.createElement("img");
    img.src="/UploadFiles/2021-04-02/">


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米