Gostaria de saber se você notou que os sites de exibição de imagem comuns usarão o efeito de fluxo em cascata, o chamado fluxo de cascata
As fotos no site não serão armazenadas em cache de uma só vez, mas esperarão que você role a uma certa distância.
As figuras a seguir continuarão a ser armazenadas em cache e as imagens também aparecem aleatoriamente, mas a largura é a mesma e a altura não é
Como, alto e baixo são como cachoeiras, por isso são chamadas de efeito de fluxo em cascata. Em seguida, vou te dar o código, todos
Vamos tentar algumas fotos.
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> O fluxo de cascata não repete </title> <estilo> *{margin: 0px; padding: 0px; list-style: nenhum;} #Box {width: 1000px; 200px; Margin-Right: 50px;} #Box img {Width: 200px;} </style> </ading> <body> <div id = "box" ><ul></ul> <ul> </ul><ul> </ul> <ul> </ul> </liv> <lcript> var box = document.getbyby (/box) (/ var ul = box.Children; função insert () {var x = 0; var srcnum = math.floor (Math.random ()*35); // 35 são 35 imagens, que podem ser alteradas para qualquer número. Eu tenho um total de 35 fotos aqui. var newli = document.createElement ('li'); newli.innerhtml = '<img src = "imagens/'+srcnum+'. png">'; // Este é o nome do arquivo da imagem e o requisito é 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; quebrar; }} ul [x] .appendChild (newli); } para (var i = 0; i <20; i ++) {insert (); } document.onscroll = function () {var ViewH = document.body.clientHeight || document.documentElement.clientHeight; var winH = document.documentElement.scrolHeight; var scrollt = document.body.scrolltop || document.documentElement.scrolltop; if (winH-scrollt-viewh <500) {for (var i = 0; i <20; i ++) {insert (); }}} </script> </body> </html>O código de exemplo acima para usar o JS para exibir o efeito de fluxo em cascata é todo o conteúdo que eu compartilho com você. Espero que você possa lhe dar uma referência e espero que você possa apoiar mais o wulin.com.