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."

Eg.getdatalist = function (Min,max) {//Die-side provides the intended construction data, which is actually
var lst = [],n=8;//save data
PNs. for (var i=0;i<n;i++) {//per simulation N Bar
var k = min + parseint (math.random () * (max-min));//number of randomly specified ranges
Lst.push (k + ". jpg");//stitching into strings
40.}
A. Return lst;//returns an array
42.};
Eg.cols = Eg.getelementsbyclassname ("col");//cache the target object
EG.COLH = [0,0,0,0];//access height of each column
Eg.getcolmin = function () {//Calculate 4 column Height
var min = 0,m = {};
. for (Var i=0;i<4;i++) {
min = parseint (eg.cols[i].offsetheight);
Eg.colh[i] = min;
M[min] = i;
51.}
Eg.cols[m[math.min.apply return (ARRAY,EG.COLH)]| | 0];//object that returns the minimum height
53.}
Methods for appending data
Eg.add = function (DL) {
(var i in DL) {
newdiv var = document.createelement ("div")
newimg var = document.createelement ("img");
NEWIMG.SRC = Dl[i];
Newdiv.appendchild (NEWIMG);
newdiv.innerhtml + = ' <p>[' +dl[i]+ ']</p> ';
Eg.getcolmin (). appendchild (newdiv);//Append to the minimum height column
62.}
63.};
Eg.scroll = function () {//scroll bar event handling
Window.onscroll = function () {//onscroll,onload,onresize can only be added like this
. var doc = document;
var top = Doc.documentElement.scrollTop | | doc.body.scrolltop;//height of scroll bar to top
Winh var = 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
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 instance Daquan-Book Note 4