通常の画像ディスプレイWebサイトがウォーターフォールフローエフェクト、いわゆる滝の流れを使用することに気づいたのだろうか
ウェブサイトの写真は一度にキャッシュされるわけではありませんが、特定の距離にスクロールするのを待ちます。
次の写真は引き続きキャッシュされ、写真もランダムに表示されますが、幅は同じで、高さはそうではありません
同様に、高と低いのは滝のようなものであるため、滝の流れ効果と呼ばれます。次に、みんな、コードをお伝えします
写真を試してみましょう。
<！doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>ウォーターフォールフローは繰り返されません</title> <style> *{margin：0px; padding：0px; list-style：none;}＃box {width：1000; wid; 200px;マージン右：50px;} #box img {width：200px;} </style> </head> <body> <div id = "box"> <ul> </ul> <ul> </ul> <ul> </ul> <ul> </ul> </div> <scrip> documentbox.getElementyid（ 'box'）; var ul = box.children; function insert（）{var x = 0; var srcnum = math.floor（math.random（）*35）; // 35は35枚の写真であり、任意の数に変更できます。ここには合計35枚の写真があります。 var newli = document.createelement（ 'li'）; newli.innerhtml = '<img src = "images/'+srcnum+'。png">'; //これは画像のファイル名であり、要件は均一です。 var minh = math.min（ul [0] .clientheight、ul [1] .clientheight、ul [2] .clientheight、ul [3] .clientheight）; for（var i = 0; i <ul.length; i ++）{if（ul [i] .clientheight == minh）{x = i;壊す; }} ul [x] .appendChild（newli）; } for（var i = 0; i <20; i ++）{insert（）; } document.onscroll = function（）{var viewh = document.body.clientheight || document.documentelement.clientheight; var winh = document.documentelement.scrollheight; var scrollt = document.body.scrolltop || document.documentelement.scrolltop; if（winh-scrollt-viewh <500）{for（var i = 0; i <20; i ++）{insert（）; }}} </script> </body> </html>JSを使用して、滝の流れの効果の画像表示（簡単な例）を実現する上記の記事は、私があなたと共有するすべてのコンテンツです。参照を提供できることを願っています。wulin.comをもっとサポートできることを願っています。