Waterfall stream Layout Based on JavaScript (2) _ javascript skills

This article mainly introduces the information related to the implementation of waterfall stream layout by using native JavaScript to achieve automatic loading of mouse drop-down images. The effect is similar to that of Baidu images, for more information about how to implement waterfall flow layout in JavaScript, see the following example.

1. Create an Html Template

The idea is to use a p iner to carry all the content, then p box is used to place the image, and finally p box_border is used as the image box. The Code is as follows:

  
   Waterfall stream  
    
      
              
  
     
  

2. Simple Style setting through css

Mainly set horizontal placement, Photo Frame color, border and so on

/* The boundary is not left blank. The background is black and gray */body {margin: 0px; background: darkgray;}/* The total layout is set to relative Layout */. container {position: relative;}/* set the box attribute */. box {padding: 5px; float: left;}/* set the shadow and rounded corner of the image border */. box_border {padding: 5px; border: 1px solid # cccccc; box-shadow: 0px 0px 5px # ccc; border-radius: 5px;}/* set the image format */. box_border img {width: 150px; height: auto ;}

3. JS controls the number of images placed in each row

After the above css layout, the size of the browser window will change, and the number of images in the window will also change. Now we need to fix the number of images in each row with JS, which can achieve good results for screens of different sizes.

/* Used to load other functions */window. onload = function () {setImgLocation ("container");}/* set the number of images */function setImgLocation (parent) {var cparent = document. getElementById (parent); // obtain the parent node var childArray = getChildNodes (cparent); // obtain the number of images var imgWidth = childArray [0]. offsetWidth; // obtain the photo width var screenWidth = document.doc umentElement. clientWidth; // obtain the browser width var count = Math. floor (screenWidth/imgWidth); // number of rows cparent.style.css Text = "width:" + count * imgWidth + "px; margin: 0 auto ;"; // set its width and Center}/* obtain the number of all images */function getChildNodes (parent) {var childArray = []; // define an array to store the image box var tempNodes = parent. getElementsByTagName ("*"); // obtain all nodes under the parent node // cyclically Add a node with the class as box for (var I = 0; I
 
  

  
4. JS implements static waterfall stream
  
First, the static layout is implemented, that is, the browser drop-down will not automatically refresh new images.
The arrangement algorithm is simple.

  
 
  
   
  
1. Save the height of the first row of images to an array.
  
   
  
2. Calculate the minimum Image Height and corresponding position in the first row.
  
   
  
3. Place the first image after the first row in this position.
  
   
  
4. Reset the height of the position to add the two images.
  
   
  
5. Loop 2. All remaining Images
  
 
  
Code:
  

  
/* Used to load other functions */window. onload = function () {setImgLocation ("container");}/* set the number and position of images */function setImgLocation (parent) {var cparent = document. getElementById (parent); // obtain the parent node var childArray = getChildNodes (cparent); // obtain the number of images var imgWidth = childArray [0]. offsetWidth; // obtain the photo width var screenWidth = document.doc umentElement. clientWidth; // obtain the browser width var count = Math. floor (screenWidth/imgWidth); // number of rows cparent.style.css Text = "width:" + count * imgWidth + "px; margin: 0 auto ;"; // set its width and center it. // define an array to store the first line of photo height var imgHArray = []; // traverse the image cyclically (var I = 0; I
   
    

    
5. js for Dynamic Loading
    
Dynamic Loading means that the scroll bar never slides to the bottom. To solve dynamic loading, we need to consider two issues:
1) when to load?
Sliding distance + browser height> distance from the last image to the top
2). How to load it?
Create a new node and add the node to it.
Final code:
    

    
/* Used to load other functions */window. onload = function () {var cparent = document. getElementById ("container"); // obtain the parent node setImgLocation (cparent); // set the loaded image var data = ["image/01.jpg"," image/02.jpg ", "image/resize," image/04.jpg", "image/05.jpg"," image/06.jpg", "image/07.jpg"," image/08.jpg", "image/09.jpg"," image/11.jpg ", "image/12.jpg"," image/13.jpg", "image/14.jpg"," image/15.jpg", "image/16.jpg"," image/17.jpg"]; // sliding listener window. onscroll = function () {if (checkLoad (cparent) {for (var I = 0; I <data. length; I ++) {// create a new node var p1 = document. createElement ("p"); p1.className = "box"; var p2 = document. createElement ("p"); p2.className = "box_border"; var img = document. createElement ("img"); img. className = ". box_border img "; img. src = data [I]; p2.appendChild (img); p1.appendChild (p2); cparent. appendChild (p1);} setImgLocation (cparent); // rearrange the node after creation}/* check whether the */function checkLoad (cparent) should be loaded) {var childArray = getChildNodes (cparent); // obtain the number of images var lastImgHight = childArray [childArray. length-1]. offsetTop; // obtain the height of the last image from the top var scrollHeight = document.doc umentElement. scrollTop | document. body. scrollTop; // get the sliding distance (annoying browser compatibility) var browserHeight = document.doc umentElement. clientHeight; // obtain the browser height if (lastImgHight <scrollHeight + browserHeight) {// determine whether to load return true;} else {return false ;}} /* set the number and position of images */function setImgLocation (cparent) {var childArray = getChildNodes (cparent); // obtain the number of images var imgWidth = childArray [0]. offsetWidth; // obtain the photo width var browserWidth = document.doc umentElement. clientWidth; // obtain the browser width var count = Math. floor (browserWidth/imgWidth); // number of rows cparent.style.css Text = "width:" + count * imgWidth + "px; margin: 0 auto ;"; // set its width and center it. // define an array to store the first line of photo height var imgHArray = []; // traverse the image cyclically (var I = 0; I
     
      

      
I hope this article will help you learn about javascript programming.