A waterfall flow is a waterfall of images of different sizes that fills the entire page with images
In AJAX, waterfall streaming is very common, using waterfall streaming infinite loading technology, the removal of the paging button, the mouse to the bottom will automatically load the image
First on the effect map:
HTML structure and CSS styles
<head> <style> * { margin: 0; padding: 0; box-sizing: border-box; } img { width: 250px; position: absolute; display: block; The transition: 0.8 s; } </style> <body> <! - page started to load some pictures - > < img SRC = "photo 1" Alt = "" > < img SRC =" photo 2 "Alt =" "> < img SRC =" image 3 "Alt =" "> < img SRC =" image 4 "Alt =" "> < img SRC = "image 5" Alt = "" > < img SRC =" image 6 "Alt =" "> < img SRC =" image 7 "Alt =" "> < img SRC =" images 8 "Alt =" "> < img SRC =" image 9 "Alt =" "> < / body > </head>Ajax
One of the key points of this is to use the imgH array to store the height of each column of images. If the height is small, it will form a waterfall stream
< script SRC = ". / server1 / public/js/Ajax. Js "> < / script > < script > / / page load to complete call layout in the layout window. The onload = layout; Window.onResize = function() {layout(); window.onResize = function() {layout(); } the function layout () {/ / get all the pictures let getImgs = document. QuerySelectorAll (" img "); / / get the width of the visual let windowWidth = document. The documentElement. ClientWidth; // Let n = Math.Floor (WindowWidth / 350); If (n <= 0) {return} let blankWidth = (windowWidth - n * 250) / 2 // imgH to record the height of each column let blankWidth = [] for (let i = 0, n1 = getImgs.length; i < n1; I ++) {let j = I % n; let j = I % n; If (imgh.length === n) {let min = getMin(imgH); // Set the left/right/up/down BlankWidth [I].style. Left = blankWidth + min * 270 + 'px' getImgs[I].style. Top = imgH[min] + 20 + 'px' // ImgH [min] = imgH[min] + getItems [I].offsetheight + 20} else {// This is used to sort the first line of the image, ImgH [I] = getItems [I].getItems [I].getItems [I].getItems + 20; BlankWidth [I].style. Left = blankWidth + j * 270 + 'px'; getImgs[i].style.top = 20 + 'px'; Function getMin(arr) {let m = 0 for (let I = 0, n = arr.length; i < n; i++) { m = Math.min(arr[m], arr[i]) === arr[m] ? m : i; } return m; } // let j = 0 // trigger the function window.onscroll = function() {// let windowHeight = document.documentElement.clientHeight; / / swept to the height of the let windowScroll = document. The documentElement. The scrollTop | | document. The documentElement. ScrollTop; / / picture height let imgsHeight = document. The documentElement. ScrollHeight; If (windowHeight + windowScroll >= imgsheigh-20) {if (j < 4) {Ajax({url: 'http://127.0.0.1:3000/getImg', / / j to the server-side data: {num: Parse (data) {parse(data) for (let key in data) {img = document.createElement('img'); Img. SRC = data[key]; document.body.appendChild(img) }; // Layout layout() after appending new nodes; }}); j++ } else { layout() } }; }; </script>The j is actually used to control the number of Ajax requests, so there are only 4 requests (not that many images), and of course if you remove the criteria, you can load it indefinitely
The server side here is simple, just responding to the image
app.get('/getImg', function(req, res) { res.setHeader('Access-Control-Allow-Origin', '*'); ImgSurL1 = {}, imgSurL2 = {}, imgSurl3 = {}, imgSurl3 = {}, If (req.query.num === '0') {res.json(imgSurl1)} else if (req.query.num === '1') { res.json(imgsUrl2) } else if (req.query.num === '2') { res.json(imgsUrl3) } else { res.json(imgsUrl4) } })This is the only thing that can be achieved by a lack of talent and knowledge (choo-choo-choo….) If there are any mistakes, still hope to point out, continue to rush ah ah ah ah ah!