Examples of JavaScript, jQuery, HTML5, and Node. js-Reading Notes 4, jquerynode. js

Examples of JavaScript, jQuery, HTML5, and Node. js-Reading Notes 4, jquerynode. js
5.2.2 let the waterfall Flow

After completing the infrastructure, you need to write JavaScript code. First, if the data is insufficient to display a screen, use the new data to supplement it. During the supplement, the data is preferentially supplemented Based on the smallest of the four columns, because the height and height are generally only visible on the client, although the server can also calculate, but it will be a waste of resources, the memory and CPU of the client can be used more, as long as the client is not slow.

As long as the images are highly inconsistent, we can quickly see a "waterfall stream" through this idea. This is only static. Data will be added to the waterfall stream during rolling, so the next step is to add a rolling event. If there is a rolling event, computation is performed and data is added.

See Figure 5-5.

I collected some images with fixed width but not fixed height on the Internet and set the page style. In actual projects, the style settings may be more complex. This book focuses on JavaScript, so let's take a look at its implementation code [Example 5-2 ].

35. eg. getDataList = function (min, max) {// The modulo end provides the pseudo-constructed data. In fact
36. var lst = [], n = 8; // save data
37. for (var I = 0; I <n; I ++) {// simulate n
38. var k = min + parseInt (Math. random () * (max-min); // number of random specified ranges
39. lst. push (k + ". jpg"); // concatenate the string
40 .}
41. return lst; // returns an array.
42 .};
43. eg. cols = eg. getElementsByClassName ("col"); // cache the target object
44. eg. colh = [0, 0, 0]; // access the height of each column
45. eg. getColMin = function () {// calculate the height of 4 columns
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]; // returns the minimum height of an object.
53 .}
// Method 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 () {// handle the scroll bar event
65. window. onscroll = function () {// onscroll, onload, onresize can only be added like this
66. var doc = document;
67. var top = doc.doc umentElement. scrollTop | doc. body. scrollTop; // The height from the scroll bar to the top
68. var winH = doc.doc umentElement. clientHeight | doc. body. clientHeight; // The height of the visible window
69. if (Math. min. apply (Array, eg. colh) <top + winH) {// if the minimum height is smaller than the visible area, add
70. eg. add (eg. getDataList (); // obtain data randomly and append it to the last
71 .}
72 .}
73 .}

In the above Code. the getElementsByClassName () method is a previously defined method stored in base. in the js file, we can see through [Example 5-1] that the default data is very small, and some need to be added during initialization, which requires the HTML page
Add a script tag. First Call eg. getColMin () to obtain the existing data height and save it to the eg. colh array to facilitate
Use the method later, and call the eg. getDataList () method to simulate a batch of data. In a regular project, AJAX is used to request data from the server, and the data is appended to the backend using the eg. add () method. Finally, call the eg. scroll () method to bind the listener to the scroll bar event. Add the following code:

<Script> eg. getColMin (); // calculate the height of the first batch of Data var dl = eg. getDataList (5, 35); // initialize some data

Eg. add (dl); // supplement the remaining data

Eg. scroll (); // start the scroll bar listener </script>

Note: In a real project, window. the onscroll event may be bound to multiple services. Therefore, in this example, the Direct Overwrite binding method should not be directly pulled into the project. Make sure that no other services are occupied, otherwise, some unexpected situations may occur, such as failure to execute or overwriting some events.
Images and files are placed in the same directory. Otherwise, modify the corresponding path. When you can't roll over with the mouse,
Congratulations! You have implemented the classic fixed-column wide waterfall stream!

The most combat JavaScript