Интересно, заметили ли вы, что обычные веб-сайты дисплея будут использовать эффект потока водопада, так называемый поток водопада
Фотографии на веб -сайте не будут кэшированы одновременно, но будут ждать, пока вы прокрутите на определенное расстояние.
Следующие картинки будут по -прежнему кэшироваться, и изображения также появляются случайным образом, но ширина такая же, а высота не
Например, высокие и низкие подобные водопадам, поэтому их называют эффектом потока водопада. Далее я дам вам код, все
Попробуем несколько фотографий.
<! Doctype html> <html lang = "en"> <head> <meta charset = "UTF-8"> <Title> Поток водопада не повторяет </title> <style> *{Margin: 0px; Padding: 0px; a aut-style: none;} #box {width: 1000px; margin: 0 aut 200px; маржи правом: 50px;} #box img {width: 200px;} </style> </head> <body> <div id = "box"> <ul> </ul> <ul> </ul> <ul> </ul> <ul> </ul> </div> <script> var box = document.getelementbyid ('box'); var ul = box.children; функция 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.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 больше.