Me pregunto si ha notado que los sitios web de visualización de imágenes ordinarias utilizarán el efecto de flujo de cascada, el llamado flujo de cascada
Las imágenes en el sitio web no se almacenarán en caché de una vez, pero esperará a que se desplace a una cierta distancia.
Las siguientes imágenes continuarán almacenando en caché, y las imágenes también aparecen al azar, pero el ancho es el mismo y la altura no es
Al igual que, altos y bajos, son como cascadas, por lo que se llaman efecto de flujo de cascada. A continuación te daré el código, todos
Probemos algunas fotos.
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> Waterfall Flow no se repite </title> <style> *{margin: 0px; relleno: 0px; list-style: none;} #box {width: 1000px; margen: 0 autóbulo;} #box ul #box: float: no; 200px; margin-right: 50px;} #box img {width: 200px;} </style> </head> <body> <div id = "box"> <ul> </ul> <ul> </ul> <ul> </ul> <ul> </ul> </iv> <script> var box = document.getEmementByid ('box'); var ul = box.children; función insert () {var x = 0; var srcnum = math.floor (math.random ()*35); // 35 son 35 imágenes, que se pueden cambiar a cualquier número. Tengo un total de 35 fotos aquí. var newli = document.createElement ('li'); newli.innerhtml = '<img src = "imágenes/'+srcnum+'. png">'; // Este es el nombre de archivo de la imagen, y el requisito es 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; romper; }} ul [x] .AppendChild (newli); } for (var i = 0; i <20; i ++) {insert (); } document.onscroll = function () {var verh = 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>El código de ejemplo anterior para usar JS para mostrar el efecto de flujo de cascada es todo el contenido que comparto con usted. Espero que pueda darle una referencia y espero que pueda apoyar más a Wulin.com.