Sample Code for implementing waterfall stream using JavaScript and jQuery

This article mainly introduces how to implement waterfall stream using JavaScript and jQuery, which has good reference value. Next, let's take a look at it. This article mainly introduces the method of implementing waterfall stream with JavaScript and jQuery, which has good reference value. Let's take a look at it with the small Editor.

Overview

I learned how to use native js and jQuery to implement waterfall stream on MOOC. Here I will take a note

Implemented using Javascript

Basic Structure:

 
  
 
 
  
 
  ...  ...  ... 

Basic style:

*{ margin: 0px; padding: 0px; } #main{ position: relative; } .box{ padding: 15px 0 0 15px; float: left; } .pic{ padding: 10px; border: 1px solid #ccc; border-radius: 5px; box-shadow: 0 0 5px #ccc; }

Ideas:

1. Obtain # All. Boxes in main

2. Calculate the number of columns of images on the page and set the page width.

3. Find the least height columns in these columns

4. From the second row, set the image to relative positioning and place an image below the minimum height column.

5. Update the column height. Repeat steps 3, 4, and 5 until the image is loaded.

6. Determine whether to continue loading the image based on the position of the last image (lazy loading)

Implementation:

1. Obtain # All. Boxes in main

// Retrieve all the elements whose class is box in main from var oParent = document. getElementById (parent); var oBox = getByClass (oParent, box );

// Obtain the element function getByClass (parent, clsname) {var arr = [] According to the class; // It is used to store all elements of the obtained class as box var oElement = parent. getElementsByTagName ('*'); for (var I = 0; I
 
  
2. Calculate the number of columns of images on the page and set the page width.
  
// Calculate the number of columns displayed on the entire page (page width/box width) var oBoxW = oBox [0]. offsetWidth; var cols = Math.floor(document.doc umentElement. clientWidth/oBoxW); // set the width of the main oParent.style.css Text = 'width: '+ oBoxW * cols + 'px; margin: 0 auto ;';
  
3. Find the least height columns in these columns
  
4. From the second row, set the image to relative positioning and place an image below the minimum height column.
  
5. Update the column height. Repeat steps 3, 4, and 5 until the image is loaded.
  
// Store the height of each column var hArr = []; for (var I = 0; I
   
    
// Obtain the minimum index value of each column. function getMinIndex (arr, value) {for (var I in arr) {if (arr [I] = value) {return I ;}}}
    
6. Determine whether to continue loading the image based on the position of the last image (lazy loading)
    
Assume that the data is from the background.
    
// Data var dataInt = {'data': [{'src': '1.jpg '}, {'src': '2.jpg'}, {'src': '3.jpg '}, {'src': '4.jpg '}]};
    
Execute when the scroll bar is rolling
    
// Window. onscroll = function () {scrollSlide (dataInt );}
    
Determine whether to load the last image based on its position.
    
// Function checkScrollSlide (parent, clsname) {var oParent = document. getElementById (parent); var oBox = getByClass (oParent, clsname); var lastBoxH = oBox [oBox. length-1]. offsetTop + Math. floor (oBox [oBox. length-1]. offsetHeight/2); var scrollTop = document.doc umentElement. scrollTop | document. body. scrollTop; var height = document.doc umentElement. clientHeight | document. body. clientHei Ght; return (lastBoxH <scrollTop + height )? True: false ;}
    
Attach Images
    
// Execute the function scrollSlide (dataInt) {/// when the scroll bar is rolling. if (checkScrollSlide ('main', 'box ')) {var oParent = document. getElementById ('main'); // render the data block to the end of the current page for (var I = 0; I
     
      
Implement with jQurey
      
The idea of using jQuery is the same, so you can directly put the code
      
$(window).on('load',function(){  waterfall();  var dataInt={'data':[{'src':'1.jpg'},{'src':'2.jpg'},{'src':'3.jpg'},{'src':'4.jpg'}]};  $(window).on('scroll',function(){  scrollSlide(dataInt);  }) }); function waterfall(){  var $oBox = $('#main>p');  var oBoxW = $oBox.eq(0).outerWidth();  var cols = Math.floor($(window).width()/oBoxW);  $('#main').css({  'width' : cols * oBoxW,  'margin' : '0 auto'  });  var hArr = [];  $oBox.each(function(index,value){  var oBoxH = $oBox.eq(index).height();  if(index
       
        p').last();  var lastBoxH = $lastBox.offset().top + Math.floor($lastBox.height()/2);  var scrollTop = $(window).scrollTop();  var clientH = $(window).height();  return (lastBoxH < scrollTop + clientH) ? true : false; } function scrollSlide(dataInt){  if(checkScrollSlide()){  $.each(dataInt.data,function(index,value){   var $Box = $('
        
').addClass('box').appendTo('#main');   var $Pic = $('
        
').addClass('pic').appendTo($Box);   $('').attr('src','images/' + $(value).attr('src')).appendTo($Pic);  })  waterfall();  } }
       
      
The above is the details of the sample code for implementing waterfall stream using JavaScript and jQuery. For more information, see other related articles in the first PHP community!