JavaScript, JQuery, HTML5, node. js instances Daquan-Reading notes 4

5.2.2, let the waterfall flow.

Once you have a good infrastructure, you need to write JavaScript code. First, if the data is not enough to display a screen, the new data to complement it, in the supplement is based on the 4 column of the shortest one as a priority to supplement, because the height of the size is generally only seen in the client, the server can also be calculated, but will be a waste of resources, the client's memory and CPU can be used more As long as you don't let the client slow down the line.

As long as the picture height inconsistency, through this way of thinking can quickly see a "waterfall Flow", which is only static, general scrolling when the waterfall stream will add data, so the next step is to add scrolling events, as long as there is scrolling to calculate and then supplement the data.

Look at the effect of Figure 5-5 first.

In the online collection of some fixed-width image of the height of the page, simply set the style, the appearance of the actual project may be more complex style settings, this book is focused on JavaScript, so let's first look at its implementation code "example 5-2."

35. Eg.getdatalist = function (Min,max) {The die end provides the intended construction data, which is actually
36. var lst = [],n=8;Save data
37. for (Var i=0;i<n;i++) {Every time you simulate N bar
38. var k = min + parseint (math.random () * (max-min));//number of randomly specified ranges
39. Lst.push (k + ". jpg");Stitching into strings
40. }
41. return LST;Returns an array
42. };
43. Eg.cols = Eg.getelementsbyclassname ("col");Cache the target object.
44. EG.COLH = [0,0,0,0];Access the height of each column
45. Eg.getcolmin = function () {Calculate 4 Column Height
46. var min = 0,m = {};
47. for (Var i=0;i<4;i++) {
48. min = parseint (eg.cols[i].offsetheight);
49. Eg.colh[i] = min;
50. M[min] = i;
51. }
52. Return eg.cols[m[math.min.apply (ARRAY,EG.COLH)]| | 0];Object that returns the minimum height
53. }
Methods for appending data
54. Eg.add = function (DL) {
55. for (var i in DL) {
56. var newdiv = document.createelement ("div")
57. var newimg = document.createelement ("img");
58. NEWIMG.SRC = Dl[i];
59. Newdiv.appendchild (NEWIMG);
60. newdiv.innerhtml + = ' <p>[' +dl[i]+ ']</p> ';
61. Eg.getcolmin (). appendchild (Newdiv);Append to the minimum height column.
62. }
63. };
64. Eg.scroll = function () {Scroll bar event Handling
65. Window.onscroll = function () {//onscroll,onload,onresize can only be added like this
66. var doc = document;
67. var top = Doc.documentElement.scrollTop | | Doc.body.scrollTop;Height of scroll bar to top
68. var Winh = doc.documentelement.clientheight| | Doc.body.clientHeight;The height of the visible window
if (Math.min.apply (ARRAY,EG.COLH) < Top+winh) {//If the minimum height is less than the viewable area, Just add
70. Eg.add (Eg.getdatalist (1,35));Data is randomly fetched and appended to the last
71.}
72.}
73.}

The Eg.getelementsbyclassname () method in the above code is a previously defined method, stored in the Base.js file, through "Example 5-1", the default data is very small, need to be added at the time of initialization, this will be in the HTML page
Add a script tag, call Eg.getcolmin () to get the data height that already exists and save it in the EG.COLH array to
After judging the use, then call the Eg.getdatalist () method to simulate a batch of data, the formal project will use AJAX to the server-side request, and then the data with the Eg.add () method appended to the back. Finally, we call the Eg.scroll () method to listen for the bound ScrollBar event, and the join code is this:

<script>eg.getcolmin ();//Calculate the height of the first batch of data var dl = Eg.getdatalist (5,35);              Initialize some of the data

Eg.add (DL);                                 Add the rest of the data

Eg.scroll ();                               Start scroll bar monitoring </script>

Note: Because the Window.onscroll event may be bound to multiple businesses in a real project, the direct overlay binding in this example should not be pulled directly into the project, so you can make sure that there is no other business footprint, or there may be unexpected situations, such as inability to execute, Some events are overwritten, and so on.
Pictures and files are placed in the same directory, otherwise please modify the appropriate path. When you can not roll with the mouse to the end,
Congratulations on your implementation of the classic fixed column wide waterfall Stream!

the most soldier assault combat type JavaScript

JavaScript, JQuery, HTML5, node. js instances Daquan-Reading notes 4