일반적인 그림 디스플레이 웹 사이트가 폭포 흐름 효과, 소위 폭포 흐름을 사용한다는 것을 알았는지 궁금합니다.
웹 사이트의 사진은 한 번에 모두 캐시되지 않지만 특정 거리로 스크롤 할 때까지 기다립니다.
다음 그림은 계속 캐시되고 그림도 무작위로 나타나지만 너비는 동일하고 높이는 그렇지 않습니다.
마찬가지로 높고 낮은 것은 폭포와 같으므로 폭포 흐름 효과라고합니다. 다음으로 나는 당신에게 코드를 줄 것입니다
사진을 시도해 봅시다.
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> 폭포 흐름은 </title> <style> *{마진 : 0px; 패딩 : 0px; 목록 스타일 : none;} #box {width : 1000px; margin : 0 auto; 200px; 마진-오른쪽 : 50px;} #box img {width : 200px;} </style> </head> <body> <div id = "box"> <ul> </ul> <ul> </ul> <ul> </ul> <ul> </ul> </div> <cript> 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.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>Waterfall Flow Effect를 표시하기 위해 JS를 사용하는 위의 예제 코드는 내가 공유하는 모든 콘텐츠입니다. 나는 당신이 당신에게 참조를 줄 수 있기를 바랍니다. 그리고 당신이 wulin.com을 더 지원할 수 있기를 바랍니다.