サーバーがないため、JSON文字列を引き下げたときに画像データロードのソースとして使用します
HTML：
<！doctype html> <html> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <script src = "js/waterfall.js"> </script> <style type = "text/css" } .pin {padding：15px 0 0 15px;フロート：左; } .box {padding：10px;ボーダー：1pxソリッド#ccc; Box-Shadow：0 0 6px #ccc;ボーダーラジウス：5px; } .box img {width：162px;高さ：自動; } </style> </head> <body> <div id = "main"> <div> <div> <img src = "./ images/1.jpg"/> </div> </div> <div> <img src = "./ 2.jpg"/>> </div> </div> <div> div> </</</</> </</</</</</</</</</</3. <img src = "./ images/4.jpg"/> </div> </div> <div> <img src = "./ images/4.jpg"/> </div> </div> <div> <img src = "./ images/5.jpg"/>> </div> </div> </6iv> </6iv> <div> <img src = "./ images/7.jpg"/> </div> </div> <div> <img src = "./ img src =" ./ img/8.jpg "/> </div> </div> <div> <img src =" ./ images/9.jpg "/>> </div> div> <img> <img src"/>> <> <img src => </div> <div> <img src = "./ images/10.jpg"/> </div> </div> <div> <img src = "./ images/10.jpg"/> </div> </div> <div> </div> </div> <div> <img src = "./ images/10.jpg"/> </div> </div> <div> <img src = "./ images/11.jpg"/>> </div> <div> <img src = "" ./ images/12.jpg src = "./ images/12.jpg"/> </div> </div> <div> <img src = "./ images/13.jpg"/> </div> </div> <div> <img src = "./ images/14.jpg"/>> </div> </div> </13.jpg " <div> <img src="./images/16.jpg"/> </div> </div> <div> <img src="./images/16.jpg"/> </div> </div> <div> <img src="./images/14.jpg"/> </div> </div> <div> <img src="./images/15.jpg"/> </div> </div> <div> <img src = "./ images/16.jpg"/> </div> </div> <div> <img src = "./ images/17.jpg"/> </div> div> <div> <img src = "" ./画像/18.jpg src = "./ images/18.jpg"/> </div> </div> <div> <img src = "./ images/19.jpg"/> </div> </div> <div> <img src = "./ images/20.jpg"/>> </div> </div> </21.jpg " </div> </div> </body> </html>jswallper.js：
window.onload = function（）{waterfall（ 'main'、 'pin'）; var datiant = {'data'：[{'src'： '1.jpg'}、{'src'： '2.jpg'}、{'src'： '3.jpg'}、{'src'： '4.jpg'}]}; window.onscroll = function（）{if（checkscrollside（））{var oparent = document.getElementById（ 'main'）; //親オブジェクト（var i = 0; i <datiant.data.length; i ++）{var opin = document.createelment（ 'div'）; //要素node opin.classname = 'pin'を追加する; //クラス名属性を追加してくださいoparent.AppendChild（Opin）; //子ノードvar obox = document.createelement（ 'div'）を追加する; obox.classname = 'box'; Opin.AppendChild（Obox）; var oimg = document.createelement（ 'img'）; oimg.src = '。/images/'+datiant.data [i] .src; Obox.AppendChild（OIMG）; }滝（ 'main'、 'pin'）; }; }}/*親親IDピン要素ID*/functionウォーターフォール（親、pin）{var oparent = document.getElementbyid（parent）; // parent object var apin = getclassobj（oparent、pin）; //ストレージブロックボックスピンApin apin var ipinw = apin [0] .offsetwidth; // var var num = math.floor（document.documentelement.clientwidth/ipinw）; //各行に収容できるピンの数[ウィンドウ幅を1つのブロックボックス幅で割る] Operent.style.csstext = 'width：'+ipinw*num+'px;マージン：0 auto; '; //親のセンタリングスタイルを設定：固定幅 +自動水平マージンvar pinharr = []; //各列にすべてのブロックボックスの高さを保存するために使用されます。 for（var i = 0; i <apin.length; i ++）{//配列の各ブロックボックス要素を転送するvar pinh = apin [i] .offseetheight; if（i <num）{pinharr [i] = pinh; //最初の行のnumブロックボックスピンは配列pinharrに追加されますapin [i] .style.position = 'absolute'; //絶対変位Apin [i] .style.top = minh+'px'を設定します。 apin [i] .style.left = apin [minhindex] .offsetleft+'px'; //配列の最小高要素の高さ + Add Apin [i] Block Box Height Pinharr [Minhindex] + = Apin [i] .OffseTheight; //ブロックボックスを追加した後の列の高さを更新}/* obj = parent.getElementsBytagname（ '*'）; //親のすべてのサブセットを取得しますvar pins = []; //（var i = 0; i <obj.length; i ++）{//子要素を送信し、カテゴリを送信し、カテゴリを判断し、アレイに押し付け、（obj [i] .classame = class name [i]。 }}; return pins;}/*****最小ピン高さ指数のインデックスを取得*/function getMinhindex（arr、minh）{for（var i in arr）{if（arr [i] == minh）{return i; }}} function checkscrollside（）{var oparent = document.getElementById（ 'main'）; var apin = getclassobj（oparent、 'pin'）; var lastpinh = apin [apin.length-1] .offsettop + math.floor（apin [apin.length-1] .offseetheight/2）; // [ブロックボックス機能滝のトリガー（）]の高さを作成します：最後のブロックボックスは、Webページの上部 +の上部からです（その高さの半分） scrolltop = document.documentelement.scrolltop || document.body.scrolltop; //紙の高さのリターン（lastpinh <scrolltop+documenth）？true：false; //指定された高さに達した後にtrueを返す、滝（）関数をトリガーした後、true}デモ図：
ソースコードダウンロード：//www.vevb.com/jiaoben/452663.html
デモアドレス：http：//demo.vevb.com/js/2016/jswallper/