Javascript-based waterfall stream layout and ajax dynamic addition of Data _ javascript skills

This article mainly introduces the waterfall stream Layout Based on javascript and relevant information about the dynamic addition of ajax data. If you need it, you can refer to this article to write a waterfall stream web page using pure js Code, initially, a basic waterfall stream layout is implemented, and the function of loading new images with ajax data is simulated after scrolling to the bottom.

Disadvantages:

1. The program is not responsive and the page width cannot be adjusted in real time;

2. When an ajax simulated data image is added to the program, all the images on the entire page are located again.

3. The program will read the size of the image after loading all the images. This is definitely not the case in reality.

4. In actual projects, the background program should give the image size value and directly use the image width attribute in js Code.

The idea of this program:

Html structure:

  
    
      
              
    
    
      
              
    
    ...  
 

I. initialize Layout

1. Set # container to position: relative;

2. Set. box to float: left;

3. Locate all images after the webpage is loaded;

3.1 The image width is fixed. The number of images per row on the current page is calculated as num, and the width of # container is obtained. Then, the page is centered;

3.2 traverse all images cyclically. The default float layout of the first num image is used as the first line, and the array BoxHeightArr = [] is saved.

3.3 After the layout of the first line is complete, arrange the next image and update BoxHeightArr []:

3.3.1 place the next image below the shorter image in the first line (locate it with position: absolute), that is, the column with the smallest height in BoxHeightArr [], and record the index values of the following numbers: minIndex;

3.3.2 update the smallest value in BoxHeightArr [] (BoxHeightArr [minIndex] + height of the current image );

3.4 Repeat steps 3.3 until all images are arranged

Ii. Real-time Monitoring of rolling height, whether to load new data

1. After initialization, the height of the last image from the top is obtained: lastContentHeight.

2. Use window. onscroll = function (){...}

The scroll height of the current page is scrollTop.

Real-time Monitoring of the current page window height: pageHeight

3. When the page detects: lastContentHeight <scrollTop + pageHeight, use ajax to obtain the json data of the newly added image.

3. Add content at the bottom of the page

1. in a loop, create a new image container and add it to the bottom. Then, write the corresponding image data, such as the path, in the json data to the container to add the image.

2. After adding all newly added images, perform Step 1 initialization for all images and la s on the page.

Project Folder:

Index.html: Pre-embedded part of image data