js native waterfall flow plug-in production

js native waterfall flow plug-in production

This article shares the specific code of the js native waterfall flow plug-in for your reference. The specific content is as follows

See the effect first

It is the same as the normal waterfall flow. When calling, you need to pass in the container, image and image width to directly generate the waterfall flow.

Without further ado, let's look at the code and then talk about the idea.

1.html and call, where HTML only needs one line

<body>
    <div class="main"></div>
 
    <script src="index.js"></script>
    <script>
        // The first parameter, waterfall container var dom = document.getElementsByClassName("main")[0];
        // The second parameter, the picture link, is written into an array var imgArr = ["img/0.jpg","img/45.jpg","img/225.jpg","img/3.png","img/7729.png","img/a.jpg","img/ama.jpg","img/c.png","img/0.jpg","img/3.png","img/45.jpg","img/225.jpg","img/7729.png","img/a.jpg","img/ama.jpg","img/c.png",];
        //Call the plug-in and pass in parameters. The third one is the image width.waterFallFlow(dom,imgArr,220);
    </script>
</body>

2. HTML corresponding to CSS

.main is the container passed in, where position: relative; is required

Then .main img{transition: all 0.5s;} is the animation code, which is added to all the images in the container

.main{
    border: 1px solid #ccc;
    width: 90%;
    margin: 0 auto;
    position: relative;
}
.main img{
    transition: all 0.5s;
}

Then js

/**
 * @param {*} dom represents the waterfall container* @param {*} imgArr image array* @param {*} wid image width*/
function waterFallFlow(dom, imgArr, wid) {
    var gap; //gap var colNumber; //number of columns imgDom();
    setImgPos();
    //When the window changes window.onresize = function(){
        setImgPos();
    }
    /**var timer = null;
     * It's smooth as written above, but it affects performance too much. When dragging the window, * the function is called very frequently to re-shoot and arrange the pictures * 
     * You can do this, anti-shake* 
     * window.onresize = function(){
     * if(timer){
     * clearIntval(timer);
     * }
     * timer = setTimeout(function(){
     * setImgPos();
     * },300);
     * }
     * 
     */
    // Generate DOM element function imgDom() {
        for (let i = 0; i < imgArr.length; i++) {
            const url = imgArr[i];
            let img = document.createElement("img");
            img.src = url;
            img.style.width = wid + "px";
            img.style.position = "absolute";
            // All images use absolute positioning img.style.left = "";
            img.style.top = "";
            img.onload = function(){
                setImgPos(); //Asynchronous loading of pictures}
            dom.appendChild(img);
        }
    }
    // Set the coordinates of each image function setImgPos() {
        cal();
        var colY = new Array(colNumber); //Store the Y coordinate of the next image in each column colY.fill(0); //Fill the array to 0
        for (let i = 0; i < dom.children.length; i++) {
            var imgM = dom.children[i];
            var y = Math.min(...colY); // find the minimum value var index = colY.indexOf(y); // column var x = (index + 1) * gap + index * wid;
            imgM.style.left = x + "px";
            imgM.style.top = y + "px";
            //Update array colY[index] += parseInt(imgM.height)+gap;
        }
        //Find the largest number in the array to solve the parent div collapse problem var h = Math.max(...colY);
        console.log(h);
        dom.style.height = h + "px";
    }
    // Calculate relevant data function cal() {
        var containerWidth = parseInt(dom.clientWidth);
        colNumber = Math.floor(containerWidth / wid); //Number of columns var space = containerWidth - colNumber * wid;
        gap = space / (colNumber + 1); //Calculate the gap}
}

Basically I have written comments, you can understand them

Let's see the idea

1. Accept the passed parameters, container, image array, image width

2. Create a picture element and add it to the corresponding container

3. Set the width and height of each picture, calculate the number of columns and spacing

4. Arrange the pictures using absolute positioning and calculate the corresponding left and top values, that is, the corresponding x and y coordinates

The first three steps should be fine, let's look at the fourth step

The idea is this

The main idea is to find the shortest column to arrange the next picture. Now the shortest appears in the second column.

At this time, the picture is added to the second shortest column. Now continue to find the shortest column and continue to add pictures.

This way, the arrangement of the waterfall flow is completed. Let's take a look at the specific process

First, calculate how many columns of images there are, create an array with a length equal to the number of columns, fill all with 0, and use it to store the y coordinates later.

Traverse the sub-elements in the container, find the minimum value in the current array in the loop, and the position (column number) of the minimum value is the y coordinate

Now we can find the x coordinate.

x = (number of columns + 1) * spacing + current column * width (the actual parameter passed in)

So there is a place

Note that you need to update the array every time, that is, modify the y coordinate of the added image position and the asynchronous loading of the image.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:
  • Native JS waterfall plug-in
  • Macy.js, a pure native JS waterfall flow plug-in for the front-end essential plug-in
  • js custom waterfall layout plugin

<<:  How to simply configure multiple servers in nginx

>>:  HTML tag marquee realizes various scrolling effects (without JS control)

Recommend

Simple comparison of meta tags in html

The meta tag is used to define file information an...

How to get the intersection/difference/union of two sets in mysql

Common scenarios of MySQL: getting the intersecti...

React useMemo and useCallback usage scenarios

Table of contents useMemo useCallback useMemo We ...

Detailed explanation of Vue3 life cycle functions and methods

1. Overview The so-called life cycle function is ...

Detailed explanation of Vue transition effects and animation transition usage examples

Table of contents transition hook function Custom...

MySQL database green version installation tutorial to solve system error 1067

What is the difference between the green version ...

Detailed explanation of Vue development website SEO optimization method

Because the data binding mechanism of Vue and oth...

Tutorial diagram of installing TomCat in Windows 10

Install TomCat on Windows This article will intro...

A brief discussion on innodb's index page structure, insert buffer, and adaptive hash index

Physical Structure of an InnoDB Index All InnoDB ...

How to use http and WebSocket in CocosCreator

Table of contents 1. HttpGET 2. HTTP POST WebSock...

How to set up automatic daily database backup in Linux

This article takes Centos7.6 system and Oracle11g...

Summary of block-level elements, inline elements, and variable elements

Block element p - paragraph pre - format text tabl...

Upgrade MySQL 5.1 to 5.5.36 in CentOS

This article records the process of upgrading MyS...

MySQL Advanced Learning Notes (Part 3): Introduction to MySQL Logical Architecture, Detailed Explanation of MySQL Storage Engine

Introduction to MySQL logical architecture Overvi...

Explanation of the concept and usage of Like in MySQL

Like means "like" in Chinese, but when ...