Floating layout: The column of the HTML structure, which is floating.
First, functional analysis:
1. Judge whether the picture enters the visible area;
2. Use AJAX to request server data;
3. To broadcast the data into the corresponding queue;
second, the realization method:
Scroll for Window event L binds a handler function: do the following:
1. How to determine the last line of the picture, whether to enter the visual area?
If: A picture in the last row is less than the distance from the top of the viewable area of the browser (the height of the viewable region + the distance value of the scroll bar sliding);
Then: You can determine the image into the browser's visual area;
2. How to use AJAX to request server data;
$.getjson () method, directly request data in JSON format;
3. To broadcast the data into the corresponding queue;
Use the $.each loop to put the corresponding JSON data into the corresponding column
Copy Code code as follows:
$ (function () {
Judge each ul's last Li, whether to enter the visible area
function (objlilast) {
Height of the viewable area of the browser
var = document.documentElement.clientHeight;
The distance the scroll bar slides
var Winscroll = $ (this). ScrollTop ();
The last li of each UL, from the top of the browser
var lastlisee = Objlilast.offset (). Top
Return Lastlisee < (see+winscroll) True:false;
}
Whether to request an ajax "switch";
var onoff = true;
$ (window). Scroll (function () {
Whether to send an ajax "switch" when dragging the scroll bar
$ ("ul"). each (function (index, Element) {
Quote the current UL
var ulthis = this;
Quote Last Li
var Lastli = $ ("Li:last", this);
Call whether to enter the visual area function
var issee = (Lastli);
if (Issee && onoff) {
OnOff = false;
Send an AJAX request to load a new picture
$.getjson ("Test1.js", function (data) {
Iterate over the list data returned in JSON
$.each (Data.list,function (keylist,ovalue) {
Traverse the SRC array inside the list, take the picture path
$.each (Ovalue,function (keysrc,avalue) {
$.each (Avalue,function (keysrc1,value1) {
var Imgli = $ ("<li><a href= ' ><p>11111</p></a>< /li> ")
$ ("ul"). EQ (KEYSRC1). Append (Imgli);
})
})
OnOff = true;
})
})
}
});
})
})
iii. Matters of note
When the AJAX request is executed, there is data being transmitted, so it takes a certain amount of time to get the returned JSON data. (with the data, can be inserted into the UL Li) and this time, if the user again drag the scroll bar, then the above code Issee or return True, so the AJAX request will be executed. Here we need to manually set a "switch" to control.
When the data is loaded and all are added to the corresponding UL, drag again to open the "switch", that is, onoff set to true;
Because the data loading is completed, it means that each column of the UL inside, at the end of the additional just through Ajax added Li data, so you can have another AJAX request.
Demo download (This is to install the server platform on the local machine). I'm using a PHP set Appserv, which is Apache.
