JavaScript implementation waterfall Flow load picture principle _javascript Skill

Tell me about the principle, or the first picture:

Function Description:

• Load different data according to the property values of different menus
• Drop-down scroll bar to a certain position preload picture, scroll bar to the bottom when rendering html;
• Mouse to move to the menu, switch to each picture list;
• Move the mouse over the picture list to display the details;
  

Technology Implementation Plan:

Let's comb through the process from load to display:
1. Loading data
2. Mosaic HTML Write to page
3. Check whether the IMG in the HTML just written is complete, if it is, enter 5, or enter 4
4. Wait for picture loading complete
5. Calculate the position of each element

In the beginning, the biggest headache was how to locate the problem, and then finally resolved through a friend's guidance: Calculate how many columns a total number of pictures and put each column height into an array. Every time a picture is loaded, it looks for the smallest value in the array, and the top of the current picture is set to this value, and then the height of the picture is added to the smallest value in the array and returned to the array, and so on.
PS: Because this function code is too many, can only make Basic simple decomposition code:

Creates an array to record the height of each column
_getlowestcol:function () {
  t._cols = new Array (5), min = 0;
  Initialized to 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) {
    //show First
    Grid = $ (GRID). Show ();
    
    var height = grid.outerheight (), Min = T._getlowestcol ();

    Locate
    grid.animate ({left
      : (T._colwidth + t._colspacing) * min,
      top:t._cols[min],
      opacity:1
    },1000);
    Record height
    t._cols[min] + = height;}

Second, the problem with the development process is that, as shown above, the mouse moves to the menu bar to toggle the list of pictures, and each needs to load different types of data with a waterfall stream. So to deal with when the page is switched to do each page to perform only one code request interface, and do not need every switch to request the data interface, only to perform a switch to display a picture list of operations.
Given that each menu has a custom attribute, the problem is easily resolved: Create an object to record whether the current menu has executed code, and if not, execute the request data.

var isload = {};//whether to load
labeltype.mouseover (function () {
  var i = $ (this). index ();
  var API = _this.attr (' API ');//Interface Identification
  
  if (! isload[API]) {
    isload[API] = i;
    LoadData (wrapper, API);
  }
  
);

The following are all the code:
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 Settings * @param {nodelist} options.container Waterfall Flow container * @param {String} opt  Ions.dataurl Data Address * @param {string} [options.datatype= ' Jsonp '] data type, JSON or Jsonp * @param {string} options.template
 Template Edit * @param {number} [options.colwidth] picture size.
 * @param {number} [options.colspacing] column interval.
 * @param {number} [options.rowspacing] line interval. * @param {number} [options.page=1] Data start Page * @param {num} [options.pageend] data at the end of page # * @pageNum () function, if not required to load now also,


 You need to remove the judgment inside the function. From the process loaded to the display 1. Load Data 2. Mosaic HTML is written to Page 3. Check if the IMG in the HTML just written is fully loaded and, if so, enter 5, otherwise enter 4 4. Wait for the picture to load complete 5.
  
  Calculates 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;

      Calculates a few column total widths/(column widths + column intervals) T._totalcols = parseint (T._container.width ()/(T._colwidth + t._colspacing));
      Creates an array to record the height of each column T._cols = new Array (t._totalcols);
      Initialized to 0 for (var i = 0; i < t._cols.length 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) {//Determine if scrolling too fast, var thistime = new Date () under IE. g

          Ettime ();
            if (Thistime-lasttime <) {Console.log (thistime-lasttime);
            Lasttime = Thistime;
          Return } if ($ (window). scrolltop () + $ (window). Height () >= document.documentElement.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 is incorrect ');}  
      });
    return false;
      },//Load data call this function _completeloading:function (result) {var t = this;
        if (t._loadingpage >= t.pageend) {$ (' #more '). Hide ();
        $ (' #loading '). HTML (' <p> is already the last page. Oh ^_^ ^_^ </p> ');
      return true;
        else {//if (!pagenum ()) {T._add (result);
      //};
    return false; },//Add lattice _add:functiOn [result] {var t = this, grids = ';
      Call template var content = Tmpl.render (t._template, {data:result.data});
          Original location T._grids = $ (content). css ({position: ' absolute ', left:t._container.width (),

      Top:t._container.height (), Width:t._colwidth, opacity:0});

      Add HTML to the container t._container.append (t._grids);
        Performs a _reposition, if all pictures are loaded, the method returns True, otherwise returns False if (!t._reposition ()) {//There are pictures not loaded, listening to onload and onerror
          T._grids.find (' img '). BIND (' Load error ', function () {this.loaded = true;
          There is a picture loading complete, again executing _reposition if (t._grids) {t._reposition ();
      }
        });
      },//This method is used to get the lowest height 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;
 },//positioning   _reposition:function () {var t = this, allimgsloaded = true;

          Detects whether the picture is all loaded complete 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) {//First displayed Grid = $ (GRID). Show ();

          var height = grid.outerheight (), Min = T._getlowestcol ();
          When not in the first row, add the line interval if (T._cols[min]) {T._cols[min] + = t._rowspacing;}
            Locate Grid.animate ({left: (t._colwidth + t._colspacing) * min, top:t._cols[min],
          Opacity:1},1000);
        Record height t._cols[min] + = height;
        });
        Reset outer container height to 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 the entire content of this article, I hope to learn JavaScript program to help you.