Ajax asynchronously implements a simple waterfall stream

Traditional waterfall Flow layout ul-li, you need to set the display of a few columns, each column is an Li, need to float and specify the width, Li inside the layout must first layout, mainly to set wide, highly automatic; and then asynchronously through Ajax, the data from the database, traverse the data into the shortest Li

The code in HTML:

<!--define the data needed in JS--
<script type= "Text/javascript" >
var ajaxhandle= ' <{:u ("Index/typeshow/ajax", "" "," ")}> '; This is the address of the background method where JS submits Ajax data.
var link= ' <{:u ("Index/show/index", "" "," ")}> '; This is the address that Ajax returns to the HTML data that the link needs to use.
var type=1; Definition type: Android,iphone,windowsphone,other
var page=1; Number of initialization pages
</script>

<!--waterfall Flow form display, using AJAX async; Each Li is a column that determines the height of Li to insert data into which Li--
<div id= ' content ' >
<ul>
<li>
<!--The data here is asynchronously fetched from Ajax
<dl>
<dt><{$v [' title ']}></dt>
<dd><{$v [' Intro ']}></dd>
</dl>
-
</li>
<li></li>
<li></li>
</ul>
</div>

The code in the CSS

#content {
margin:10px;
}
#content li{
Float:left;
width:300px;
margin:13px;
}
#content dl{
Background:white;
-webkit-box-shadow: #666 0px 0px 5px;
-moz-box-shadow: #666 0px 0px 5px;
Box-shadow: #666 0px 0px 5px;
margin-bottom:20px;
}
#content dt{
Background: #111;
Color: #eee;
font-size:16px;
line-height:30px;
height:30px;
Overflow:hidden;
padding:5px;
}
#content dd{
font-size:14px;
Color: #333;
padding:10px;
}
#content DL div{
height:25px;
}
#content DL Div span{
margin-left:150px;
margin-bottom:10px;
font-size:14px;
Color: #333;
}
#content a{
Color: #eee;
}
#content a:hover{
Color:yellow;
}

The code in JS

Waterfall Flow Effect
Initializes the variable ajaxover to determine if the AJAX-sent HTML data is loaded, which prevents the scroll bar from scrolling to the bottom to continuously send AJAX requests
var ajaxover=true;

Ajax fetch data Once DOM loading is complete
$ (document). Ready (function () {
Loadmore ();
});

scroll bar trigger event; Scroll is JQ built-in event
$ (window). bind (' scroll ', function () {
Load new content when scrolling to the bottom 100 pixels
if (document). Height ()-$ (this). ScrollTop ()-$ (this). Height () <100) {
if (ajaxover) {//When Ajaxover is true, execute the Loadmore () function
Loadmore ();
}else {
return false;
}

}
});

//ajax asynchronously reads data, iterates through the data obtained in the background, iterates through each Li's height each time, and draws the shortest one, inserting the data into that
function Loadmore () {
Ajaxover=false; When the Loadmore () function is executed, the ajaxover is changed to false so that the following Ajax does not execute Loadmore
$.ajax ({
Url:ajaxhandle,
DataType: ' JSON ',
Type: ' Post ',
data:{' page ':p age, ' type ': type},
Success:function (content) {
if (content.length >0) {
//traverse the returned data (a two-dimensional array)
for (var i = 0; i < content.length; i++) {
//define variables, sort with Li Traversal
var $row, Ihtight, Itempheight;
//Find the column with the lowest current height, and add the new content to the column
Iheight = 1;
$ (' #content Li '). each (function () {
Itempheight = number (this). Height ());  //number () Converts the height of the extraction to a numeric type for comparison
if (Iheight==-1 | | iheight>itempheight) {
iheight = itempheight;
$row = $ (this);  //the height of the order, save the shortest one to the variable
}
});

Assemble data that is output to HTML
var item= ' <dl> ';
The A link here does not directly use the U () method, and the link that is added after the DOM is loaded is unresolved; link is the link= ' & LT, which is defined in HTML for parsing; {: U ("Index/show/index", "" "," ")}> '; This will get the address of the submission method.
item+= ' <dt> ' + ' <a href= ' ' +link+ '/id/' +content[i][' id ']+ ' "> ' +content[i][' title ']+ ' </a></dt > ';
item+= ' <dd> ' +content[i][' intro ']+ ' </dd> ';
item+= ' item+= ' <div><span> ' +content[i][' date ']+ ' </span></div> ';
item+= ' </dl> ';

$row. Append (item); Inserting data into the shortest one
}
}else {
$ (window). Unbind (' scroll '); Removes the scrollbar-bound event so that the scrollbar event is terminated when no data is reached and no meaningless AJAX requests are made
}
Ajaxover=true; Ajax returns the data to HTML to complete before setting Ajaxover to true; notice is written in Success's function.
}
});
page++; One page per load plus one (principle like paging)
}

The code in PHP

Ajax asynchronous data transfer for waterfall streams
Public Function Ajax () {
$page =$_post[' page '; Get the number of pages Ajax sends over-page
$type =$_post[' type ']; Gets the type of Ajax sent over-android, IPhone, WindowsPhone, other
Remove 10 data at a time
$pagesize = 15;
$m =m (' article ');
Limit (($page-1) * $pagesize, $pagesize), from the beginning of the first few, take out a few, use the number of pages to judge from the beginning of the first
$content = $m->where (Array (' delete ' =>0, ' type ' = ' = ' $type) ')->field (' Id,title,intro,date ')->order (' Date Desc ')->limit (($page-1) * $pagesize, $pagesize)->select ();
if ($content) {
$this->ajaxreturn ($content, ' json ');
}else{
$this->ajaxreturn (Array (' status ' =>0), ' json ');
}
}

Points:
1, through the ajaxover=true; Such a way to prevent continuous triggering events
2, the JSON data returned by the database can be a two-dimensional array, in JS in accordance with the array way to traverse it can
3, you can bind the event via bind (), or you can remove the event via unbind ()
4, the data returned in the JS link can not directly use the U () method, because the DOM is already loaded, through Ajax asynchronous U () will not parse, so you need to first define VAR link= ' <{:u ("Index/show/index", "" "," ") in the template. }> '; In JS with this variable to link the address of the splicing ' <a href= ' +link+ '/id/' +content[i][' id ']+ ' ">"
5, waterfall Flow principle is similar to paging, through the number of pages to determine the data obtained

Ajax asynchronously implements a simple waterfall flow