この記事では、全員の参照のために、JSウォーターフォールフローの負荷効果を共有しています。特定のコンテンツは次のとおりです
マウススクロールイベントは、マウスが底にスクロールすると、画像を動的にロードします。
1。HTMLコード
<！Doctype HTML> <HTML> <ヘッド> <メタcharset = "utf -8"> <title> jsは滝の流れ効果を実現します - ダイナミックロード写真</title> <link rel = "styleSheet" href = " </head> <body> <div id = "container"> <div> <div> <img src = "img/1.jpg"/> </div> </div> <div> <div> <img src = "img/3.jpg"/>> </div> </div> <div> <img = "img/4.jpg/</</</</</</</</</</</</</ src = "img/4.jpg"/> </div> </div> <div> <img src = "img/5.jpg"/> </div> </div> <div> <div> <img src = "img/6.jpg"/>> </div> </div> <div> <img = "img/div> </</</</</</</< src = "img/3.jpg"/> </div> </div> <div> <img src = "img/3.jpg"/> </div> </div> <div> <div> <div> <img src = "img/1.jpg"/>> </div> </div> </div> <div> <img = "/> </> </> < <div> <img src = "img/1.jpg"/> </div> </div> <div> <img src = "img/2.jpg"/> </div> </div> <div> <img src = "img/2.jpg"/>> </div> </div> div> </3.> </3.> div> div> div> div> div> div> div <div> <img src = "img/4.jpg"/> </div> </div> <div> <div> <img src = "img/5.jpg"/> </div> </div> <div> <img src = "img/5.jpg"/>> </div> div> <img> <img> </> <img> </> </> <img = "impg> </div> </div> </body> </html>
2。CSSコード
*{マージン：0px;パディング：0px;}＃container {position：relative;}。box {padding：5px;フロート：左;マージン：0px auto;}。box_img {padding：5px;境界線：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"： "" src "" "" "" "" "" "" "" "" "" "" "" "" src "" "src"： "src" " 5.jpg "}、{" src "：" 6.jpg "}、{" src "：" 2.jpg "}、{" src "：" 3.jpg "}、{" src "：" 3.jpg "}、{" src "：" 4.jpg "}、{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 = "img/"+imgdata.data [i] .src; Boximg.AppendChild（IMG）; //他の方法は、元のコンテンツを上書きせずにDivの背後にコンテンツを追加しますcheckflag（）{var cparent = document.getElementById（ "container"）; scrolltop = document.documentelement.scrolltop || document.body.scrolltop; //スクロールバーは、上部からのものです。 if（lastcontentheight <scrolltop+pageheight）{return true; num = math.floor（document.documentelement.clientwidth/imgwidth）; // 1つの行に写真の数をcparent.style.csstext = "+imgwidth*num+" px; margin：0px auto "; i = 0; i <ccontent.length; i ++）{if（i <num）{boxheightarr [i] = ccontent [i] .offseetheight; index // console.log（minheight+"、"+minindex）; style.position = "abstop = minheight+" px "; //上部高さから取得boxheightarr [minindex]+= ccontent [i] .offsetheight; // console.log（ccontent [i] .offsetheight+"、"+ccontent [i] .height）; // ccontent [i] .height =未定義}}} boxheightarr）{if（boxheightarr [i] == minheight）{return i}}} function getChildElement {//すべてのコンテンツを取得= [] if（allcontent [i] .classname == "box"）{contentarr.push（allcontent [i]）;上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。