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

Better looking CSS custom styles (title h1 h2 h3)

Rendering Commonly used styles in Blog Garden /*T...

JavaScript to achieve custom scroll bar effect

In actual projects, the up and down scroll bars a...

Navicat remote connection to MySQL implementation steps analysis

Preface I believe that everyone has been developi...

Teach you step by step to develop a brick-breaking game with vue3

Preface I wrote a few examples using vue3, and I ...

Detailed explanation of three ways to cut catalina.out logs in tomcat

1. Log4j for log segmentation 1) Prepare three pa...

Detailed explanation of various join summaries of SQL

SQL Left Join, Right Join, Inner Join, and Natura...

CSS code to distinguish ie8/ie9/ie10/ie11 chrome firefox

Website compatibility debugging is really annoyin...

Nginx handles http request implementation process analysis

Nginx first decides which server{} block in the c...

7 ways to vertically center elements with CSS

【1】Know the width and height of the centered elem...

Optimizing the performance of paging query for MySQL with tens of millions of data

When the amount of data in MySQL is large, limit ...

HTML5+CSS3 header creation example and update

Last time, we came up with two header layouts, on...

Sample code for automatic web page refresh and automatic jump

Automatic web page refresh: Add the following code...

How to install Mysql5.7 in Centos6

environment Centos 6.6 MySQL 5.7 Install If the s...

A brief analysis of the knowledge points of exporting and importing MySQL data

Often, we may need to export local database data ...

Linux CentOS6.5 yum install mysql5.6

This article shares the simple process of install...