I wonder if you have noticed that ordinary picture display websites will use the waterfall flow effect, the so-called waterfall flow
The pictures on the website will not be cached all at once, but will wait for you to scroll to a certain distance.
The following pictures will continue to be cached, and the pictures also appear randomly, but the width is the same and the height is not
Like, high and low are like waterfalls, so they are called waterfall flow effect. Next I will give you the code, everyone
Let's try some pictures.
<!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> </div> <script> var box=document.getElementById('box'); var ul=box.children; function insert(){ var x=0; var srcNum=Math.floor(Math.random()*35);//35 is 35 pictures, which can be changed to any number. I have a total of 35 pictures here. var newli=document.createElement('li'); newli.innerHTML='<img src="images/'+srcNum+'.png">';//This is the file name of the image, and the requirement is uniform. 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; break; } } 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>The above article using JS to achieve the image display of waterfall flow effects (simple examples) is all the content I share with you. I hope you can give you a reference and I hope you can support Wulin.com more.