Two ways to implement image waterfall flow in js (with code)

What is a picture waterfall flow

You can clearly see what a picture waterfall flow looks like by using the picture layout of a petal web page:

To put it simply, there are many pictures tiled on the page. Each picture has the same width but different heights. It looks like n columns are arranged in an orderly manner. Waterfall, so there is a picture of waterfall flow.

Principle of implementation

1. The first way

The premise of the first way is: the picture The width is fixed, but the columns are variable (according to the screen size)

Through the above introduction, we know that the prerequisite for realizing waterfall flow is that the width is consistent (if it is 100px), and the height can be different.

[Related course recommendations: JavaScript video tutorial]

Let’s first Determine the number of columns to arrange (if it is 4 columns), then only 4 pictures can be placed in the first row, and then put the height of each picture into an array (if it is heightArr = [100,50, 200,30] ), when we put the next picture, we need to determine which height in this array is the smallest (here is 30), and then we also need to know the index of the height array where the smallest height is (here is i = 3), Then we can position this picture:

{
    position: absolute;
    left: i*100 + 'px';
    top: 30 + 'px'
}

Just traverse the remaining pictures in this way.

Implementation code

The following is the unprocessed original code. There are many blank spaces between the pictures, which affects the appearance.

nbsp;html>


    <meta>
    <meta>
    <meta>
    <title>Document</title>
    <style>
        .box {
            position: relative;
        }
        img {
            width: 200px;
            vertical-align: top;
            padding: 5px;
        }
    </style>


    <p>
        <img  src="/static/imghwm/default1.png" data-src="./images/img/2-.jpg" class="lazy" alt="Two ways to implement image waterfall flow in js (with code)" >
        <img  src="/static/imghwm/default1.png" data-src="./images/img/3-.jpg" class="lazy" alt="Two ways to implement image waterfall flow in js (with code)" >
        <img  src="/static/imghwm/default1.png" data-src="./images/img/4-.jpg" class="lazy" alt="Two ways to implement image waterfall flow in js (with code)" >
        <img  src="/static/imghwm/default1.png" data-src="./images/img/5-.jpg" class="lazy" alt="Two ways to implement image waterfall flow in js (with code)" >
        <img  src="/static/imghwm/default1.png" data-src="./images/img/6-.jpg" class="lazy" alt="Two ways to implement image waterfall flow in js (with code)" >
        <img  src="/static/imghwm/default1.png" data-src="./images/img/7-.jpg" class="lazy" alt="Two ways to implement image waterfall flow in js (with code)" >
        <img  src="/static/imghwm/default1.png" data-src="./images/img/8-.jpg" class="lazy" alt="Two ways to implement image waterfall flow in js (with code)" >
        <img  src="/static/imghwm/default1.png" data-src="./images/img/9-.jpg" class="lazy" alt="Two ways to implement image waterfall flow in js (with code)" >
        <img  src="/static/imghwm/default1.png" data-src="./images/img/10-.jpg" class="lazy" alt="Two ways to implement image waterfall flow in js (with code)" >
        <img  src="/static/imghwm/default1.png" data-src="./images/img/11-.jpg" class="lazy" alt="Two ways to implement image waterfall flow in js (with code)" >
        <img  src="/static/imghwm/default1.png" data-src="./images/img/12-.jpg" class="lazy" alt="Two ways to implement image waterfall flow in js (with code)" >
        <img  src="/static/imghwm/default1.png" data-src="./images/img/13-.jpg" class="lazy" alt="Two ways to implement image waterfall flow in js (with code)" >
        <img  src="/static/imghwm/default1.png" data-src="./images/img/14-.jpg" class="lazy" alt="Two ways to implement image waterfall flow in js (with code)" >
        <img  src="/static/imghwm/default1.png" data-src="./images/img/15-.jpg" class="lazy" alt="Two ways to implement image waterfall flow in js (with code)" >
        <img  src="/static/imghwm/default1.png" data-src="./images/img/16-.jpg" class="lazy" alt="Two ways to implement image waterfall flow in js (with code)" >
    </p>

The following is the processed code:

nbsp;html>


    <meta>
    <meta>
    <meta>
    <title>Document</title>
    <style>
        .box {
            position: relative;
        }
        img {
            width: 200px;
            vertical-align: top;
            padding: 5px;
        }
    </style>


    <p>
        <img  src="/static/imghwm/default1.png" data-src="./images/img/2-.jpg" class="lazy" alt="Two ways to implement image waterfall flow in js (with code)" >
        <img  src="/static/imghwm/default1.png" data-src="./images/img/3-.jpg" class="lazy" alt="Two ways to implement image waterfall flow in js (with code)" >
        <img  src="/static/imghwm/default1.png" data-src="./images/img/4-.jpg" class="lazy" alt="Two ways to implement image waterfall flow in js (with code)" >
        <img  src="/static/imghwm/default1.png" data-src="./images/img/5-.jpg" class="lazy" alt="Two ways to implement image waterfall flow in js (with code)" >
        <img  src="/static/imghwm/default1.png" data-src="./images/img/6-.jpg" class="lazy" alt="Two ways to implement image waterfall flow in js (with code)" >
        <img  src="/static/imghwm/default1.png" data-src="./images/img/7-.jpg" class="lazy" alt="Two ways to implement image waterfall flow in js (with code)" >
        <img  src="/static/imghwm/default1.png" data-src="./images/img/8-.jpg" class="lazy" alt="Two ways to implement image waterfall flow in js (with code)" >
        <img  src="/static/imghwm/default1.png" data-src="./images/img/9-.jpg" class="lazy" alt="Two ways to implement image waterfall flow in js (with code)" >
        <img  src="/static/imghwm/default1.png" data-src="./images/img/10-.jpg" class="lazy" alt="Two ways to implement image waterfall flow in js (with code)" >
        <img  src="/static/imghwm/default1.png" data-src="./images/img/11-.jpg" class="lazy" alt="Two ways to implement image waterfall flow in js (with code)" >
        <img  src="/static/imghwm/default1.png" data-src="./images/img/12-.jpg" class="lazy" alt="Two ways to implement image waterfall flow in js (with code)" >
        <img  src="/static/imghwm/default1.png" data-src="./images/img/13-.jpg" class="lazy" alt="Two ways to implement image waterfall flow in js (with code)" >
        <img  src="/static/imghwm/default1.png" data-src="./images/img/14-.jpg" class="lazy" alt="Two ways to implement image waterfall flow in js (with code)" >
        <img  src="/static/imghwm/default1.png" data-src="./images/img/15-.jpg" class="lazy" alt="Two ways to implement image waterfall flow in js (with code)" >
        <img  src="/static/imghwm/default1.png" data-src="./images/img/16-.jpg" class="lazy" alt="Two ways to implement image waterfall flow in js (with code)" >
    </p>

<script></script>
<script>
    $(function () {
        // 获取图片的宽度(200px)
        let imgWidth = $(&#39;img&#39;).outerWidth(); // 200

        waterfallHandler();

        // 瀑布流处理
        function waterfallHandler() {
            // 获取图片的列数
            let column = parseInt($(window).width() / imgWidth);

            // 高度数组
            let heightArr = [];
            for(let i=0; i<column; i++) {
                heightArr[i] = 0;
            }

            // 遍历所有图片进行定位处理
            $.each($(&#39;img&#39;), function (index, item) {
                // 当前元素的高度
                let itemHeight = $(item).outerHeight();
                // 高度数组最小的高度
                let minHeight = Math.min(...heightArr);
                // 高度数组最小的高度的索引
                let minIndex = heightArr.indexOf(minHeight);
                
                $(item).css({
                    position: &#39;absolute&#39;,
                    top: minHeight + &#39;px&#39;,
                    left: minIndex * imgWidth + &#39;px&#39;
                });

                heightArr[minIndex] += itemHeight;
            });
        }
        
        // 窗口大小改变
        $(window).resize(function () {
            waterfallHandler();
        });
    });
</script>

2. The second method

The premise of the second method is: the number of columns is fixed, and then the image is adaptively scaled according to the width of the screen.

In this method, since the image can be scaled, the width and height are difficult to determine, so it is difficult to use positioning.

We can handle it this way. Now that we know the columns, we can make a container for each column. Then iterate through the pictures and put the pictures into the container with the smallest container height.

Here we use js to add images instead of writing them in html in advance.

Implementation code

nbsp;html>



    <meta>
    <meta>
    <meta>
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul li {
            list-style: none;
            float: left;
        }
    </style>




<script></script>
<script>
    $(function () {
        const COLUMN = 4; // 4列
        let arr = []; // 存储4列li
        let minHeight = [] // 存储4列的高度

        create();

        function create() {
            // 创建ul li作为每一列的容器
            $("<ul>").appendTo($("body")).css("width", "100%");
            for (let i = 0; i < COLUMN; i++) {
                var li = document.createElement("li");
                $(li).appendTo($("ul"))
                    .css({
                        "width": "24%",
                        "margin": "0 0.5%"
                    });
                arr.push(li);
                // console.log(arr);
                minHeight.push(0);
            }
            createImg();
        }

        function createImg() {
            let img = new Image();
            img.num = 2;
            img.src = `./images/img/${img.num}-.jpg`; // 素材图片的规律为 2-.jpg 3-.jpg 4-.jpg ...
            $(img).css("width", "100%");
            // 当图片加载完后
            $(img).on("load", loadHandler);
        }

        function loadHandler() {
            // 高度数组的最小值
            let min = Math.min.apply(null, minHeight);
            // 高度数组的最小值索引
            let minIndex = minHeight.indexOf(min);
            // 克隆一份图片
            let im = this.cloneNode(true);
            // 将图片假如对应最小值索引的容器中
            arr[minIndex].append(im);
            // 更新最小值索引的容器的高度
            minHeight[minIndex] += im.getBoundingClientRect().height;

            this.num++;

            // 图片的个数只有79张
            if (this.num > 79) {
                $(this).off("load", loadHandler);
                return;
            }
            this.src = `./images/img/${this.num}-.jpg`;
        }
    });
</script>

This article comes from the js tutorial column, welcome to learn!

The above is the detailed content of Two ways to implement image waterfall flow in js (with code). For more information, please follow other related articles on the PHP Chinese website!