脚本宝典收集整理的这篇文章主要介绍了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,请注明来意。