JS realizes the effect of picture waterfall flow

JS realizes the effect of picture waterfall flow

This article shares the specific code of JS to realize the picture waterfall flow for your reference. The specific content is as follows

process:

1. Create a module bigblock to store all the pictures.
2. Get this large module and add a sub-element block to hold the small image.
3. Encapsulate a function list(n) to store 50 pictures, and append each picture into the empty array ele[].
4. Encapsulate a function set_position() to determine the position of each picture, using attributes such as offsetHeight, offsetTop, offsetWidth, and set a dynamic height for the largest block. As the number of loaded pictures increases, the height of the largest block also increases.
5. Use window.onload event to load pictures more conveniently.
6. Add an event to the browser's scroll bar. When the scroll bar slides to 10px above the bottom of the visible area of ​​the body, load 30 new pictures, and each time the scroll bar stays at the position of the picture just loaded.

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>photo waterfall</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        body{
           /* background: #ebebeb;*/
            background: url(./img/bging2.jpg);
            background-size:100% ;
            height:100%;
        }
        .bigblock {
            position: relative;
            width:650px;
            min-height: 200px;
            background: #fff;
            margin:auto;

        }
        .smallblock{
            position:absolute;
            width:100px;
            border-radius:5px;
            box-shadow: 0 0 7px #89c8eb;
            box-sizing: border-box;
            overflow: hidden;
        }
        .photo{
            width:100%;
            vertical-align: middle;
        }
    </style>
</head>
<body>
<div class="bigblock">

</div>
<script>
    var Big = document.getElementsByClassName ("bigblock")[0];
    var ele=[];
    var num=6;
    var bghight=0;
    var start=0;
    var image_img=["1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg", "6.jpg", "7.jpg", "9.jpg", "10.jpg","11.jpg","12.jpg","13.jpg","14.jpg","15.jpg","16.jpg","17.jpg"];
    for(var i=0;i<50;i++){
        list();

    }
  function list(n){
      var small = document.createElement("div");
      var image = document.createElement("img");
      small.className="smallblock";
      image.className="photo";
      image.src="./img/"+image_img[parseInt(Math.random()* image_img.length)]; //0-12
      ele.push(small);
      Big.appendChild(small);
      small.appendChild (image);

  }
   function set_position(){
     for(var i=start;i<ele.length;i++){
       //Set the position of each picture var settop=i <num ? 0: ele[i-num].offsetHeight +10 + ele[i-num].offsetTop;
       ele[i].style.top=settop+"px";
       var setleft = i %num * ele[i].offsetWidth + (i % num) * 10;
       ele[i].style.left=setleft+"px";
         //Get the background height bghight =(ele[i].offsetHeight +ele[i].offsetTop)>bghight ? ele[i].offsetHeight +ele[i].offsetTop :bghight ;
       Big.style.height =bghight + "px";
     }
   }

   window.onload = function(){
       set_position();
       //Add the browser's scroll bar event this.addEventListener ("scroll", function() {
          var b_height=document.body.clientHeight;
           if(parseInt (this.pageYOffset + this.innerHeight ) > b_height - 10 ){
              start =ele.length;
              for(i=0;i<30;i++){
                   list();
              }
               set_position ();
           }
          // console.log(b_height); //The visible height of the body, variable // console.log(this.pageYOffset); //The upper offset of the scroll bar // console.log(this.innerHeight); //The height of the browser's visible area})
   }
</script>
</body>
</html>

The picture is not a dynamic picture, so you can't see any effect, but the code is correct, you can give it a try.

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:
  • Using js to achieve waterfall effect
  • js realizes the dynamic loading of data by waterfall flow bottoming out
  • How to use JS to implement waterfall layout of web pages
  • js to achieve waterfall flow layout (infinite loading)
  • 3 ways to implement waterfall layout with JavaScript
  • Have you learned how to implement JavaScript waterfall flow?

<<:  Setting the engine MyISAM/InnoDB when creating a data table in MySQL

>>:  js to realize web message board function

Recommend

Analysis of two implementation methods for adding static routing in Linux

Command to add a route: 1.Route add route add -ne...

Docker uses the mysqldump command to back up and export mysql data in the project

mysqldump command Introduction: A database backup...

jQuery plugin to implement floating menu

Learn a jQuery plugin every day - floating menu, ...

Summary of CSS front-end knowledge points (must read)

1. The concept of css: (Cascading Style Sheet) Ad...

Summary of several principles that should be followed in HTML page output

1. DOCTYPE is indispensable. The browser determin...

Detailed explanation of using javascript to handle common events

Table of contents 1. Form events 2. Mouse events ...

The perfect solution for Vue routing fallback (vue-route-manager)

Table of contents Routing Manager background gett...

Solution to no Chinese input method in Ubuntu

There is no solution for Chinese input method und...

Implementation of tomcat image created with dockerfile based on alpine

1. Download the alpine image [root@docker43 ~]# d...

Quickly solve the problem of slow startup after Tomcat reconfiguration

During the configuration of Jenkins+Tomcat server...

Ubuntu 20.04 how to modify the IP address example

illustrate: Today, when continuing the last offic...

Detailed explanation of the installation, configuration, startup and shutdown methods of the Mysql server

1. Download from official website: https://dev.my...

Problems with creating placeholders for HTML selection boxes

I'm using a placeholder in a text input and i...

How to turn local variables into global variables in JavaScript

First we need to know the self-calling of the fun...

Detailed tutorial on building a local idea activation server

Preface The blogger uses the idea IDE. Because th...