js實例教程-原生JS代碼實現瀑布流效果

发布时间:2018-11-23 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了js實例教程-原生JS代碼實現瀑布流效果脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小寶典致力於為廣大程序猿(媛)提供高品質的代碼服務,請大家多多光顧小站,小寶典在此謝過。

前兩天通過B站在極客學院學習了JS動態瀑布流效果:主要是HTML+CSS控制樣式,通過JS實現全局瀑布流樣式,以及通過訪問自定義的JSON字符串,實現圖片無限加載;現對其代碼進行整理,供日後學習參考。

HTML代碼部分:

 <!DOCTYPE html>   <html>   <head>   <;meta charset="utf-8">   <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">   <tITle>瀑布流</title>   <meta name="description" content="">   <meta name="keywords" content="">   <link href="css/style.css" rel="stylesheet">   <script type="text/javascript" src="js/app.js"></script>   <script type="text/javascript" src="jquery-3.3.1.min.js"></script>   </head>   <body>       <p id="container">           <p class="box">               <p class="boximg">                   <img src="images/11.jpg" alt="">               </p>                       </p>           <p class="box">               <p class="boximg">                   <img src="images/12.jpg" alt="">               </p>                       </p>           <p class="box">               <p class="boximg">                   <img src="images/13.jpg" alt="">               </p>                       </p>           <p class="box">               <p class="boximg">                   <img src="images/14.jpg" alt="">               </p>                       </p>           <p class="box">               <p class="boximg">                   <img src="images/15.jpg" alt="">               </p>                       </p>           <p class="box">               <p class="boximg">                   <img src="images/16.jpg" alt="">               </p>                       </p>           <p class="box">               <p class="boximg">                   <img src="images/17.jpg" alt="">               </p>                       </p>           <p class="box">               <p class="boximg">                   <img src="images/18.jpg" alt="">               </p>                       </p>           <p class="box">               <p class="boximg">                   <img src="images/19.jpg" alt="">               </p>                       </p>           <p class="box">               <p class="boximg">                   <img src="images/20.jpg" alt="">               </p>                       </p>           <p class="box">               <p class="boximg">                   <img src="images/21.jpg" alt="">               </p>                       </p>           <p class="box">               <p class="boximg">                   <img src="images/22.jpg" alt="">               </p>                       </p>                      </p>   </body>   </html>  

CSS代碼部分

 @charset "UTF-8"; /**  *   * @authors zhanghe-V (807597850@QQ.COM)  * @date    2018-06-11 20:12:16  * @version $1.0$  */ *{  padding: 0px;  margin: 0px; } #container{  position: relative; } .box{  padding: 5px;  float: left; } .boximg{  padding: 5px;  border: 1px solid #595959FF;  box-shadow: 0 0 5px #ccc; /*陰影效果*/  border-radius: 5px;/*圓角效果*/  } .boximg img{  width: 200px;  height: auto; }

JS代碼部分

 /**  *   * @authors zhanghe-V (807597850@qq.com)  * @date    2018-06-11 20:23:17  * @version $1.0$  */ window.onload = function(){  imgLocation("container","box")   VAR imgData = {"data":[        {"src":"11.jpg"},        {"src":"12.jpg"},        {"src":"13.jpg"},        {"src":"14.jpg"},        {"src":"15.jpg"},        {"src":"16.jpg"},        {"src":"17.jpg"},        {"src":"18.jpg"},        {"src":"19.jpg"},        {"src":"20.jpg"},        {"src":"21.jpg"},        {"src":"22.jpg"},]}     window.onscroll = function(){   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="boximg";     ccontent.appendChild(boximg);     var img = document.createElement("img");     img.src = "images/"+imgData.data[i].src;     boximg.appendChild(img);    }    imgLocation("container","box");   }    } }  function checkFlag(){  var cparent = document.getElementById("container");  var  ccontent = getChildElement(cparent,"box");  var lastContentHeight = ccontent[ccontent.length-1].offsetTop;  var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;  var pageHeight = document.documentElement.clientHeight||document.body.clientHeight;  if (lastContentHeight<(scrollTop+pageHeight)) {   return true;  }  console.LOG(lastContentHeight+","+scrollTop+","+pageHeight); }  function imgLocation(parent,content){  //將parent下所有的content全部取出  var cparent = document.getElementById(parent);  var ccontent = getChildElement(cparent,content);  var imgwidth = ccontent[0].offsetWidth;  //獲得每一行顯示圖片的個數  var cols = Math.floor(document.documentElement.clientWidth / imgwidth);  //設置父容器container的寬度,並設置樣式居中  cparent.style.cssText = "width:"+imgwidth*cols+"px;margin:0 auto";   var boxHeightArr = [];  for (var i = 0; i < ccontent.length; i++) {   if (i 

前兩天通過B站在極客學院學習了JS動態瀑布流效果:主要是HTML+CSS控制樣式,通過JS實現全局瀑布流樣式,以及通過訪問自定義的JSON字符串,實現圖片無限加載;現對其代碼進行整理,供日後學習參考。

HTML代碼部分:

 <!DOCTYPE html>   <html>   <head>   <meta charset="utf-8">   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">   <title>瀑布流</title>   <meta name="description" content="">   <meta name="keywords" content="">   <link href="css/style.css" rel="stylesheet">   <script type="text/javascript" src="js/app.js"></script>   <script type="text/javascript" src="jquery-3.3.1.min.js"></script>   </head>   <body>       <p id="container">           <p class="box">               <p class="boximg">                   <img src="images/11.jpg" alt="">               </p>                       </p>           <p class="box">               <p class="boximg">                   <img src="images/12.jpg" alt="">               </p>                       </p>           <p class="box">               <p class="boximg">                   <img src="images/13.jpg" alt="">               </p>                       </p>           <p class="box">               <p class="boximg">                   <img src="images/14.jpg" alt="">               </p>                       </p>           <p class="box">               <p class="boximg">                   <img src="images/15.jpg" alt="">               </p>                       </p>           <p class="box">               <p class="boximg">                   <img src="images/16.jpg" alt="">               </p>                       </p>           <p class="box">               <p class="boximg">                   <img src="images/17.jpg" alt="">               </p>                       </p>           <p class="box">               <p class="boximg">                   <img src="images/18.jpg" alt="">               </p>                       </p>           <p class="box">               <p class="boximg">                   <img src="images/19.jpg" alt="">               </p>                       </p>           <p class="box">               <p class="boximg">                   <img src="images/20.jpg" alt="">               </p>                       </p>           <p class="box">               <p class="boximg">                   <img src="images/21.jpg" alt="">               </p>                       </p>           <p class="box">               <p class="boximg">                   <img src="images/22.jpg" alt="">               </p>                       </p>                      </p>   </body>   </html>  

CSS代碼部分

 @charset "UTF-8"; /**  *   * @authors zhanghe-V (807597850@qq.com)  * @date    2018-06-11 20:12:16  * @version $1.0$  */ *{  padding: 0px;  margin: 0px; } #container{  position: relative; } .box{  padding: 5px;  float: left; } .boximg{  padding: 5px;  border: 1px solid #595959FF;  box-shadow: 0 0 5px #ccc; /*陰影效果*/  border-radius: 5px;/*圓角效果*/  } .boximg img{  width: 200px;  height: auto; }

JS代碼部分

 /**  *   * @authors zhanghe-V (807597850@qq.com)  * @date    2018-06-11 20:23:17  * @version $1.0$  */ window.onload = function(){  imgLocation("container","box")   var imgData = {"data":[        {"src":"11.jpg"},        {"src":"12.jpg"},        {"src":"13.jpg"},        {"src":"14.jpg"},        {"src":"15.jpg"},        {"src":"16.jpg"},        {"src":"17.jpg"},        {"src":"18.jpg"},        {"src":"19.jpg"},        {"src":"20.jpg"},        {"src":"21.jpg"},        {"src":"22.jpg"},]}     window.onscroll = function(){   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="boximg";     ccontent.appendChild(boximg);     var img = document.createElement("img");     img.src = "images/"+imgData.data[i].src;     boximg.appendChild(img);    }    imgLocation("container","box");   }    } }  function checkFlag(){  var cparent = document.getElementById("container");  var  ccontent = getChildElement(cparent,"box");  var lastContentHeight = ccontent[ccontent.length-1].offsetTop;  var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;  var pageHeight = document.documentElement.clientHeight||document.body.clientHeight;  if (lastContentHeight<(scrollTop+pageHeight)) {   return true;  }  console.log(lastContentHeight+","+scrollTop+","+pageHeight); }  function imgLocation(parent,content){  //將parent下所有的content全部取出  var cparent = document.getElementById(parent);  var ccontent = getChildElement(cparent,content);  var imgwidth = ccontent[0].offsetWidth;  //獲得每一行顯示圖片的個數  var cols = Math.floor(document.documentElement.clientWidth / imgwidth);  //設置父容器container的寬度,並設置樣式居中  cparent.style.cssText = "width:"+imgwidth*cols+"px;margin:0 auto";   var boxHeightArr = [];  for (var i = 0; i < ccontent.length; i++) {   if (i 

覺得可用,就經常來吧!Javascript技巧 腳本寶典 歡迎評論哦! js技巧,巧奪天工,精雕玉琢。小寶典獻醜了!

脚本宝典总结

以上是脚本宝典为你收集整理的js實例教程-原生JS代碼實現瀑布流效果全部内容,希望文章能够帮你解决js實例教程-原生JS代碼實現瀑布流效果所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。