JQuery waterfall floating layout (1) (loading images with delayed AJAX)

Source: Internet
Author: User

Floating layout: a column in the HTML structure. It is floating.

I. Function Analysis:

1. Determine whether the image enters the visible area;
2. Request server data using AJAX;
3. broadcast the data to the corresponding queue;

II. Implementation Method:

Bind a processing function to the scroll event l of window: do the following:
1. How can I determine whether the last row of images is in the visible area?
If the distance between an image in the last row and the top of the visible area of the browser is less than (the height of the visible area + the distance value of the scroll bar sliding );
Then, we can determine that the image has entered the visible area of the browser;
2. How to Use AJAX to request server data;
$. GetJSON () method, directly requesting data in JSON format;
3. broadcast the data to the corresponding queue;
Use the $. each loop to import the corresponding JSON data to the corresponding column.Copy codeThe Code is as follows: $ (function (){
// Determine whether the last LI of each UL enters the visible area
Function see (objLiLast ){
// The height of the visible area of the browser
Var see = document.doc umentElement. clientHeight;
// The sliding distance of the scroll bar
Var winScroll = $ (this). scrollTop ();
// The Last LI of each UL, located at 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 ){
// Reference the current UL
Var ulThis = this;
// Reference the last LI
Var lastLi = $ ("li: last", this );
// Call whether to enter the visible area Function
Var isSee = see (lastLi );
If (isSee & onOff ){
OnOff = false;
// Send an AJAX request to load a new image
$. GetJSON ("test1.js", function (data ){
// Traverse the list data in the returned JSON
$. Each (data. list, function (keyList, ovalue ){
// Traverse the SRC array in the LIST and obtain the image 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. Notes
When an AJAX request is executed, data is transmitted. Therefore, it takes some time to obtain the returned jSON data. (With data, you can insert LI into UL.) at this time, if you drag the scroll bar again, the isSee of the code above returns true, so the AJAX request will be executed. Here we need to manually set a "Switch" to control.
Only after the data is loaded and all are added to the corresponding UL, when you drag it again, turn on this "Switch", that is, set onOff to true ;,
After the data is loaded, it means that the UL of each column has more LI data added through AJAX at the end, so there can be another AJAX request.

Download the DEMO (this is to install the server platform on the local machine. I used the PHP APPSERV package, which contains APACHE)

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.