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

Vue code highlighting plug-in comprehensive comparison and evaluation

Table of contents Comprehensive comparison From t...

Various front-end printing methods of web: CSS controls web page printing style

CSS controls the printing style of web pages : Use...

javascript input image upload and preview, FileReader preview image

FileReader is an important API for front-end file...

New settings for text and fonts in CSS3

Text Shadow text-shadow: horizontal offset vertic...

Solve the problem of margin merging

1. Merge the margins of sibling elements The effe...

Detailed explanation of the wonderful uses of SUID, SGID and SBIT in Linux

Preface Linux's file permission management is...

Implementing a simple student information management system based on VUE

Table of contents 1. Main functions 2. Implementa...

JavaScript uses canvas to draw coordinates and lines

This article shares the specific code of using ca...

How to use resize to implement image switching preview function

Key Points The CSS resize property allows you to ...

Understand the rendering process of HTML pages in preparation for learning front-end performance optimization (continued)

Last night I wrote an essay about the browser ren...

mysql three tables connected to create a view

Three tables are connected. Field a of table A co...

Four ways to compare JavaScript objects

Table of contents Preface Reference Comparison Ma...

Detailed explanation of the use of HTML canvas and page storage technology in JavaScript

Table of contents 1. JavaScript uses canvas in HT...

A brief summary of vue keep-alive

1. Function Mainly used to preserve component sta...

What does input type mean and how to limit input

Common methods for limiting input 1. To cancel the...