Javascript implements the principle of waterfall stream loading images, and javascript waterfall

Javascript implements the principle of waterfall stream loading images, and javascript waterfall

Let's talk about the principle first:

 

Function Description:

• Load different data based on the attribute values of different menus
• Pull down the scroll bar to a certain position to pre-load the image. When the scroll bar is pulled to the bottom, render html;
• Move the cursor to the menu and switch to the image list;
• Move the cursor over the image list to display details;
  

Technical implementation solution:

First, sort out the process from loading to display:
1. load data
2. concatenate HTML and write it to the page
3. check whether all img files in the newly written HTML are loaded. If yes, go to Step 5; otherwise, go to step 4.
4. Wait until the image is loaded
5. Calculate the position of each element

At the beginning, the biggest headache was how to locate the problem. After some guidance, I finally solved the problem: I calculated the total number of images and put the height of each column in an array. When an image is loaded, find the smallest value in the array and set the top of the current image to this value, after the operation, add the height of the image to the minimum value in the array and return it to the array, and so on.
PS:Because there are too many code for this function, the code can only be simply decomposed:

// Create an array _ getLowestCol: function () {t. _ cols = new Array (5), min = 0; // Initialization is 0 for (var I = 0; I <t. _ cols. length; I ++) {if (cols [I] <cols [min]) {min = I;} return min ;}, _ reposition: function () {t. _ grids. each (function (I, grid) {// display grid first =$ (grid ). show (); var height = grid. outerHeight (), min = t. _ getLowestCol (); // locate the grid. animate ({left: (t. _ colWidth + t. _ colSpacing) * min, top: t. _ cols [min], opacity: 1}, 1000); // record height t. _ cols [min] + = height ;});}

Second, the problem encountered during the development process is: As shown in, to move the mouse to the menu bar, you need to switch the image list and load different types of data with waterfall streams. Therefore, when switching pages, how can we achieve that each page only executes the Code request interface once, instead of re-requesting the data interface for each switchover, you only need to switch to display the image list.
Considering that each menu has a custom attribute, this problem is easily solved: Create an object to record whether the current menu has executed code, and if not, execute the request data.

Var isLoad ={}; // whether labelType is loaded. mouseover (function () {var I = $ (this ). index (); var api = _ this. attr ('api '); // Interface ID if (! IsLoad [api]) {isLoad [api] = I; loadData (wrapper, api );}});

All the code is as follows:
Html:

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
Js:

/*** Waterfall flow layout component class * @ param {Object} options component setting * @ param {NodeList} options. container waterfall stream container * @ param {String} options. dataURL data address * @ param {String} [options. dataType = 'jsonp'] data type, json or jsonp * @ param {String} options. template editing * @ param {Number} [options. colWidth] The image size. * @ Param {Number} [options. colSpacing] column interval. * @ Param {Number} [options. rowSpacing] specifies the row interval. * @ Param {Number} [options. page = 1] data start page Number * @ param {Number} [options. pageEnd] Page number at the end of the Data * @ pageNum () function. If you do not need to load the data now, remove the judgment in the function. Process from loading to display 1. load data 2. concatenate HTML and write it to the page. 3. check whether all img files in the newly written HTML are loaded. If yes, go to 5; otherwise, go to 44. wait until the image is loaded. calculate the position of each element */define (function (require, exports, module) {'use strict '; var Tmpl = require ('lib/tmpl/2.1.x/index. js'), $ = require ('lib/jquery/1.11.x/index. js'); var waterFall = {init: function (options) {var t = this; t. _ container = options. container; t. _ template = options. template; t. _ colWidth = options. colWidth; T. _ colSpacing = options. colSpacing; t. _ rowSpacing = options. rowSpacing; t. dataURL = options. dataURL; t. dataType = options. dataType; t. page = options. page; t. pageEnd = options. pageEnd; t. _ switch = false; // calculate the total width of several columns/(column width + column interval) t. _ totalCols = parseInt (t. _ container. width ()/(t. _ colWidth + t. _ colSpacing); // create an array t used to record the height of each column. _ cols = new Array (t. _ totalCols); // Initialization is 0 for (var I = 0; I <t. _ cols. len Break; I ++) {t. _ cols [I] = 0;} t. _ loadingPage = options. page | 0; t. _ loadNext (options); // The drop-down scroll bar loads var lastTime = new Date (). getTime (); $ (window ). scroll (function () {if (! T. _ switch) {// determines whether the scrolling speed is too fast. In ie, var thisTime = new Date (). getTime (); if (thisTime-lastTime <50) {console. log (thisTime-lastTime); lastTime = thisTime; return;} if ($ (window ). scrollTop () + $ (window ). height ()> = document.doc umentElement. scrollHeight) {lastTime = thisTime; t. _ loadNext () ;}}) ;}, // loader _ loadNext: function (t) {var t = this; t. _ switch = true; // request data if (! T. trigger) {$. ajax ({url: t. dataURL, data: {page: ++ t. _ loadingPage}, dataType: t. dataType, success: function (response) {t. trigger = t. _ completeLoading (response) ;}, error: function () {console. log ('error! Request error ') ;}};}return false ;}, // call this function after loading data _ completeLoading: function (result) {var t = this; if (t. _ loadingPage> = t. pageEnd) {$ ('# more '). hide (); then ('{loading'{.html ('<p> is the last page, __^ ^ _ ^ </p>'); return true;} else {// if (! PageNum () {t. _ add (result); //};} return false;}, // add the grid _ add: function (result) {var t = this, grids = ''; // call the template var content = Tmpl. render (t. _ template, {data: result. data}); // the original location t. _ grids = contents (content).css ({position: 'absolute ', left: t. _ container. width (), top: t. _ container. height (), width: t. _ colWidth, opacity: 0}); // Add Html to container t. _ container. append (t. _ grids); // execute _ reposition once. If all the images are loaded, This method returns true; otherwise, false if (! T. _ reposition () {// listen to onload and onerror t if an image is not loaded. _ grids. find ('img '). bind ('Load error', function () {this. loaded = true; // if an image is loaded, execute _ reposition if (t. _ grids) {t. _ reposition () ;}}}}, // this method is used to obtain the column _ getLowestCol: function () {var cols = this. _ cols, min = 0; for (var I = 1; I <cols. length; I ++) {if (cols [I] <cols [min]) {min = I ;}return min ;}, // location_reposition: function () {var t = This, allImgsLoaded = true; // check whether all images are loaded. t. _ grids. find ('img '). each (function (I, img) {if (! Img. loaded &&! Img. complete) {allImgsLoaded = false;} return allImgsLoaded;}); if (allImgsLoaded) {t. _ grids. each (function (I, grid) {// display grid first =$ (grid ). show (); var height = grid. outerHeight (), min = t. _ getLowestCol (); // if (t. _ cols [min]) {t. _ cols [min] + = t. _ rowSpacing;} // locate the grid. animate ({left: (t. _ colWidth + t. _ colSpacing) * min, top: t. _ cols [min], opacity: 1}, 1000); // record height t. _ cols [min] + = height;}); // reset the height of the outer container to the highest column height. t._container.css ('height', Math. max. apply (Math, t. _ cols); t. _ switch = false; delete t. _ grids;} return allImgsLoaded;},} return waterFall ;});
The above is all the content of this article, and I hope it will help you learn javascript programming.
Articles you may be interested in:

 

 
  
The js dynamic loading of images in IE6 and IE7 is not displayed incorrectly.
 
  
Js achieves Image pre-loading (js operates Image object attribute complete, event onload asynchronously loads images)
 
  
Js-implemented beauty falls stream effect code
 
  
Implementation of javascript adaptive width waterfall stream
 
  
Pure js enables waterfall stream display of photos (automatically adapts to the window size)
 
  
Analysis of waterfall stream layout: Implementation of JS + absolute positioning
 
  
Examples of javascript pre-loaded images, css, and js
 
  
Example of a simple method for js to implement waterfall stream
 
  
How to Use the jquery plug-in lazyload. js to delay image loading