JQ implementation waterfall flow layout + lazy loading


JQ implementation waterfall flow layout + lazy loading


1. Make sure that all the pictures are the same width, and then determine how many columns to show, the first row to use float:left Implement sorting
2. As shown in the figure below, we show a total of four columns of pictures. Starting from the second row, we put the pictures in the four columns in order by positioning, and put them under the column with the least total height of the whole column. As shown in the figure below, the number represents the sequence of picture stacking
JQ implementation waterfall flow layout + lazy loading


1. CSS and HTML, IMG tags to save trouble

<!DOCTYPE html>
<html lang="en">

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
        body {
            margin: 0;
            padding: 0;

        .parentBox {
            height: 100%;
            margin: 0 auto;
            position: relative;
            margin-top: 10px;

        .parentBox img {
            width: 100px;
            height: aotu;
            float: left;
            display: block;

    <div class="parentBox">

2. JS sort pictures

    $(function () {
        //@Params {parentbox} [parent element DOM]
        //@Params {imgarr} [picture DOM array]
        //@Params {otherwidth} [spacing]
        //@Params {columnnum} [number of columns specified]

        function WaterFall(parentBox, imgArr, otherWidth, columnNum) {

            //1. Get the width of browser's view divided by the width of a single picture (including spacing) to get the number of columns
            Let windowswidth = $(window). Width() // browser view width
            Let singlewidth = imgarr [0]. Offsetwidth // single picture width
            columnNum ? columnNum : columnNum = ~~(windowWidth / (singleWidth + otherWidth))

            //2. Assign the total width of a row of pictures, including the spacing, to the parent box in the middle of the horizontal (high comfort, full fit ~)
            let parentBoxWidth = (columnNum - 1) * otherWidth + columnNum * singleWidth
            parentBox.css({ width: parentBoxWidth })

            //3. Create an array to record the height of each column
            let heightGroup = new Array()

            //4. Traverse the DOM array of images
            for (var i = 0; i < imgArr.length; i++) {
                If (I < columnnum) {// 5-1. The matching is the first row of pictures. Record the height of each column in the first row and store it in highgroup
                    If (I > 0) {// 5-2
                        imgArr[i].style.cssText = `padding-left:${otherWidth}px;`
                }Here we match all the pictures after the first row, and start to assign the position to the pictures
                    //6-2. Find the index of the column with the lowest current height and assign it to minindex
                    this.minIndex = heightGroup.findIndex((item) => {
                        return item == Math.min.apply(null, heightGroup)
                    this.currentPositionLeft  =  this.minIndex  *(singlewidth + otherwidth) // 6-3. Get the value of left
                    this.currentDomHeight  =Imgarr [i]. OffsetHeight // 6-4. Get the height of the current picture to update the height group
                    imgArr[i].style.cssText = `position: absolute;left:${this.currentPositionLeft}px;top:${heightGroup[this.minIndex] + otherWidth}px`
                    heightGroup[ this.minIndex ] +=  this.currentDomHeight  +Otherwidth // 6-5. Update highgroup

        let parentBox = $('.parentBox')
        let imgArr = $('.parentBox img')

        //Call function to arrange pictures
        WaterFall(parentBox, imgArr, 6)

        //When the window size changes, call waterfall to retrieve the current dom
        $(window).resize(() => {
            parentBox = $('.parentBox')
            imgArr = $('.parentBox img')
            WaterFall(parentBox, imgArr, 6)

        //Simulated image data
        let data = [
        //Lazy load to retrieve the current Dom and call waterfall
        $(window).scroll(() => {
            let lastDom = $($('.parentBox img')[$('.parentBox img').length - 1])
            //Scroll loading
            if ($('html').scrollTop() + $(window).height() >  lastDom.offset (). Top) {// the last picture enters the window
                for (let index = 0; index < data.length; index++) {
                WaterFall(parentBox, $('.parentBox img'), 6)