最初にレンダリングを見せてください：
Webページをスライドすると、画像を自動的にロードして表示できます。
写真を保持するボックスモデルは次のとおりです。
<div> <div> <img src = "img/8.jpg"> </div> </div>
IMG-widthを150pxに設定し、Box_imgが内側のマージンとシャドウエフェクトを追加し、Boxの外側のマージンは0、内側のマージンを追加します。ボックスの幅は、IMG幅とマージンによって引き伸ばされます。言い換えれば、ボックス間に間隔はありませんが、ボックス内にいくつかのマージンがあります。このようにして、JSの位置を設定するときは、マージンの問題を考慮する必要はありません。ボックスの幅を呼び出すだけです。
すべてのボックスを保持するDIVの位置を相対的に設定するため、最上位または左値を設定するときは、最も外側のマージン属性を考慮する必要はありません。
画像を配置：画像の最初の行の高さを取得し、配列に保存します。次の画像で位置を絶対に設定し、最小の高さで画像の下に置き、上部と左に設定し、アレイの最小値を新しく配置された画像の高さに追加します。言い換えれば、最初の行を除き、HTMLに配置された元の写真はJSで再配置されます。
ページを下にスライドさせると、イベント関数がトリガーされ、写真が無限に荷重されるようにいくつかの写真が配置されます。
HTMLファイル：
<！doctype html> <html> <head lang = "en"> <meta charset = "utf-"> <title> </title> <link rel = "href =" waterfall.css "type =" text/css "> <script src =" waterfall.js " src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <div> <div> <img src = "img/.jpg"> </div> <> <> <> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> </div> <div> <img src = "img src = "img/.jpg"> </div> <div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg" " src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <img src = "img/.jpg"> </div src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> <div> <div> <img src = "img/.jpg" src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> <img src = "img/.jpg"> </div> <div> <img> <img src = "img/.jpg"> </div> </div> <div> <img> <img src = "img/.jpg"> </div> </div> <div> <img src = "img/.J src = "img/.jpg"> </div> <div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg" " src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <div> <img src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> </div> <> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg" " src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> div> <div> <img src = "img/.jpg" src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> </div> <div> <img src = "img/div> </div src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> <div> <div> <img src = "img/.jpg"> </<> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> <div> <div> <img src = "img/.jpg" src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> </div> <div> <img src = "img src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> <div> <img> <img> <img src = "img/.jpg"> </</< src = "img/.jpg"> </div> </div> <div> <div> <img src = "img/.j src =" img/.jpg "> </div> <div> <div> <img src =" img/.jpg ""> </divg src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <div> <img src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> <> <> <> <> src = "img/.jpg"> </div> <div> <div> <img src = "img/.jpg"> </div> <div> <div> <img src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> <img src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> </div> </html>
CSSファイル：
*{マージン：;パディング：;}＃content {position：relative; background-color：＃;}。box {padding：px; float：left;}。box_img{padding：px; border：px solid＃ccccc;JSファイル：
Math.floor（）関数は下方に丸くすることができます。
Math.min.apply（null、heightArr）;関数は、heightARRアレイの最小値を取得できます。
window.onscroll = function（）{};この関数は、ページをスライドするときにトリガーされます。
document.documentelement.clientheight;ブラウザによって表示される高さ。
document.documentlement.scrolltop;スライドする距離。
/*** 2016/4/9にASUAによって作成されましたlodeimage = {"date"：[{"src"： "1.jpg"}、{"src"： "2.jpg"}、{"src"： "3.jpg"}、{"src"： "4.jpg"}、{"src"： "src"： "5.jpg" "" "}、" " "src"： "7.jpg"}、{"src"： "8.jpg"}、{"src"： "9.jpg"}、{"src"： "10.jpg"}、]} window.onscroll = function（）{if（checkflag（））{for i = 0; i <lodeimage.date.length; i ++）{var box = document.createelement（ "div"）; box.classname = "box"; var cparent = document.getElementbyid（ "content"）; cparent.AppendChild（box）; var box_img = document.createelement（ "div"）; box_img.classname = "box_img"; box.appendchild（box_img）; var img = document.createelement（ "img"）; img.src = "img/"+lodeimage.date [i] .src; box_img.appendChild（img）;} imglocation（ "content"、 "box"）;}}} function checkflag（）{var cparent.getelementbyid（ "）; var ccontent = getChildElement（cparent、 "box"）; var lastcontentheight = ccontent [ccontent.length-1] .offsettop; var scrollheight = document.documentlement.scrolltop || document.body.scrolltop; var pageheight.document.documentelement.clientheight || document.body.clientheight; console.log（lastContentheight+"："+scrollheight+"："+pageheight）; if（lastContentHeight <scrollheight+pageheight）{return true;}} letunty imglocation（親） cparent = document.getElementById（parent）; var ccontent = getChildElement（cparent、child）; var imgwidth = ccontent [0] .offsetwidth; var cols = math.floor（document.documentelement.clientwidth/imgwidth）; cparent.style.csstext = "width："+imgwidth*cols+"px; margin：30px auto"; var heightArr = []; for（var i = 0; i <ccontent.length; i ++）{if（i <cols）{heightarr.push（ccontent [i] .offseetheight）;} else {var minheight = math.min.apply（null、heightArr）; var minindex = getMinIndex（heightArr、minheight）; ccontent [i] .style.position = "absolute"; ccontent [i] .style.top = minheight+"px" ; ccontent [i] .style.left = ccontent [minindex] .offsetleft+"px"; heightArr [minindex]+= ccontent [i] .offseeth;}}}関数getMinIndex（heightArr、minheight）{for（var i = 0; i <heightarr.length; i ++）{if（heightArr [i] == minheight）{return i;}}} function getChildElement（親、content）{var contentArr = []; var allcontent = parentElementsbytagname; i = 0; i <allcontent.length; i ++）{if（allcontent [i] .classname == content）{contentArr.push（allcontent [i]）;}} return contentArr;}さて、JSによって画像を自動的にロードする滝の流れ効果のコードがここで紹介されています。それがあなたに役立つことを願っています！