Ajax implementation of picture waterfall flow (super detailed oh)

Time:2021-7-30

The so-called waterfall flow is to make pictures of different sizes look like waterfalls, and the whole page is full of pictures

And inAjaxIt is common to use the mouse button to automatically load the waterfall. In the end, it can cancel the automatic loading of the waterfall

Let’s start with the renderings:

Ajax implementation of picture waterfall flow (super detailed oh)

HTML structure and CSS Style

<head>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        img {
            width: 250px;
            position: absolute;
            display: block;
            transition: 0.8s;
        }
    </style>

    <body>
        <!--  Load some pictures as soon as the page comes up -- >
        <img>
        <img>
        <img>
        <img>
        <img>
        <img>
        <img>
        <img>
        <img>
    </body>
</head>

Ajax

One of the key points is to useimgHThis array is used to store the image height of each column. If the height is small, it will form a waterfall flow

<script></script>
<script>
    //When the page is loaded, call layout for layout
    window.onload = layout;
    //Window changes also call functions
    window.onresize = function() {
        layout();
    }

    function layout() {
        //Get all pictures
        let getImgs = document.querySelectorAll('img');
        //Gets the width of the viewable area
        let windowWidth = document.documentElement.clientWidth;
        //Calculate how many pictures are displayed on a line
        let n = Math.floor(windowWidth / 350);
        if (n <= 0) {
            return
        }

        //Calculate the margins on both sides of the page
        let blankWidth = (windowWidth - n * 250) / 2
        //Imgh is used to record the picture height of each column
        let imgH = []
        for (let i = 0, n1 = getImgs.length; i < n1; i++) {
            //It is used to calculate the number of img in a row and index the array
            let j = i % n;
            if (imgH.length === n) {
                //Start at the low altitude
                let min = getMin(imgH);
                //Position left and right up and down, and give a spacing of 20px
                getImgs[i].style.left = blankWidth + min * 270 + 'px'
                getImgs[i].style.top = imgH[min] + 20 + 'px'

                //Change the height of the picture at this position
                imgH[min] = imgH[min] + getImgs[i].offsetHeight + 20
            } else {
                //This is used to sort the first row and put the height of img into the array
                imgH[i] = getImgs[i].offsetHeight + 20;
                //Left and right positioning
                getImgs[i].style.left = blankWidth + j * 270 + 'px';
                getImgs[i].style.top = 20 + 'px';
            }
        }
    }

    //Find the index of the picture with the lowest height
    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;
    }
    
    //J is used to record the number of Ajax requests
    let j = 0
    //Trigger function when scroll bar scrolls
    window.onscroll = function() {
        //Visual area height
        let windowHeight = document.documentElement.clientHeight;
        //Height of being rolled away
        let windowScroll = document.documentElement.scrollTop || document.documentElement.scrollTop;
        //Picture height
        let imgsHeight = document.documentElement.scrollHeight;
        
        //To determine whether the data is sent to the bottom, send the data through the Ajax request
        if (windowHeight + windowScroll >= imgsHeight - 20) {
            if (j < 4) {
                Ajax({
                    url: 'http://127.0.0.1:3000/getImg',
                    //Pass J to the server
                    data: {
                        num: j
                    },
                    success(data) {
                        data = JSON.parse(data)
                        for (let key in data) {
                            //Create image label
                            let img = document.createElement('img');
                            //Binding label
                            img.src = data[key];
                            document.body.appendChild(img)
                        };
                        //Re layout after adding new nodes
                        layout();
                    }
                });
                j++
            } else {
                layout()
            }
        };
    };
</script>

therejIt’s actually used to controlAjaxThe number of requests is. There are only 4 requests (not so many pictures). Of course, if you remove the judgment conditions, you can realize unlimited loading

The server here is relatively simple, just responding to pictures

app.get('/getImg', function(req, res) {
    res.setHeader('Access-Control-Allow-Origin', '*');
    //Four picture libraries have been prepared
    imgsUrl1 = {},
    imgsUrl2 = {},
    imgsUrl3 = {},
    imgsUrl4 = {}
    //One gallery per request
    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)
    }
})

I have little talent and learning, so I can only realize this thing (wuwuwuwuwuwuwuwuwuwuwuwuwuwuwuwuwuwuwuwuwuwuwuwuwuwuwuwuwuwuwuwuwuwuwuwuwuwuwuwuwuwuwuwuwuwuwuwuwuwuwuwuwuwuwuwuwuwuwuwuwuwuwuwuwuwuwuwuwuwuwuwuwu!

Recommended Today

VBS obtains the operating system and its version number

VBS obtains the operating system and its version number ? 1 2 3 4 5 6 7 8 9 10 11 12 ‘************************************** ‘*by r05e ‘* operating system and its version number ‘************************************** strComputer = “.” Set objWMIService = GetObject(“winmgmts:” _  & “{impersonationLevel=impersonate}!\\” & strComputer & “\root\cimv2”) Set colOperatingSystems = objWMIService.ExecQuery _  (“Select * from […]