Je me demande si vous avez remarqué que les sites Web d'images ordinaires utiliseront l'effet d'écoulement de la cascade, le soi-disant débit de cascade
Les photos sur le site Web ne seront pas mises en cache en même temps, mais attendront que vous faisiez défiler à une certaine distance.
Les images suivantes continueront d'être mises en cache, et les images apparaissent également au hasard, mais la largeur est la même et la hauteur n'est pas
Comme, les hauts et les faibles sont comme les cascades, ils sont donc appelés effets de débit de cascade. Ensuite, je vais vous donner le code, tout le monde
Essayons quelques photos.
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Waterfall flow does not repeat</title> <style> *{margin: 0px;padding: 0px;list-style: none;} #box{width: 1000px;margin: 0 auto;} #box ul{float: left;width: 200px; margin-right: 50px;} #box img {width: 200px;} </ style> </ head> <body> <div id = "box"> <ul> </ul> <ul> </ul> <ul> </ul> <ul> </ul> </v> <ul> var box = document.getElementyd ('box'); var ul = box.children; fonction insert () {var x = 0; var srcnum = math.floor (math.random () * 35); // 35 est 35 images, qui peuvent être modifiées en n'importe quel nombre. J'ai un total de 35 photos ici. var newli = document.CreateElement ('li'); newli.innerhtml = '<img src = "images /' + srcnum + '. png">'; // c'est le nom de fichier de l'image, et l'exigence est uniforme. 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; casser; }} ul [x] .appendChild (newli); } pour (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>L'exemple de code ci-dessus pour l'utilisation de JS pour afficher l'effet d'écoulement de la cascade est tout le contenu que je partage avec vous. J'espère que vous pourrez vous faire référence et j'espère que vous pourrez soutenir Wulin.com plus.