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

XHTML language default CSS style

html,address, blockquote, body,dd,div, dl,dt,fiel...

Several popular website navigation directions in the future

<br />This is not only an era of information...

Solve the problem of docker container exiting immediately after starting

Recently I was looking at how Docker allows conta...

3D tunnel effect implemented by CSS3

The effect achievedImplementation Code html <d...

How to solve the error of PyCurl under Linux

Solution to "Could not run curl-config"...

How to create a style guide for your website in web interface design (with pictures and text)

What is a style guide? Simply put, it’s a document...

Usage scenarios and source code analysis of Vue advanced components functional components

Table of contents introduce Usage scenarios Sourc...

How to distribute two buttons on the left and right sides of the same parent tag using CSS

This article mainly introduces the method of CSS ...

Simple example of HTML text formatting (detailed explanation)

1. Text formatting: This example demonstrates how...

Mini Program Custom TabBar Component Encapsulation

This article example shares the specific code for...

How to get form data in Vue

Table of contents need Get data and submit Templa...

Responsive Web Design Learning (3) - How to improve the performance of web pages on mobile devices

Preface Mobile devices have higher requirements f...

Nginx access log and error log parameter description

illustrate: There are two main types of nginx log...

Create a code example of zabbix monitoring system based on Dockerfile

Use the for loop to import the zabbix image into ...

Docker primary network port mapping configuration

Port Mapping Before the Docker container is start...