傳統瀑布流佈局ul-li，須要先設定顯示幾列，每列是一個li，須要左浮動並指定寬度，li裏面的佈局也要先佈局好，主要是要定寬，高度自動；而後經過ajax異步，從數據庫中獲得數據，遍歷後將數據插入最矮的li中

HTML中的代碼：

<!--定義JS中須要的數據-->
<script type="text/javascript">
var ajaxHandle='<{:U("Index/Typeshow/ajax","","")}>'; //這個是JS提交AJAX數據的後臺方法的地址
var link='<{:U("Index/Show/index","","")}>'; //這個是AJAX返回給HTML數據中連接須要用到的地址
var type=1; //定義類型：Android，iPhone，windowsphone，other
var page=1; //初始化頁數
</script>

<!-- 瀑布流形式顯示，使用ajax異步；每一個li是一列，經過判斷li的高度決定插入數據到哪一個li裏面-->
<div id='content'>
<ul>
<li>
<!--這裏的數據都從ajax異步獲取
<dl>
<dt><{$v['title']}></dt>
<dd><{$v['intro']}></dd>
</dl>
-->
</li>
<li></li>
<li></li>
</ul>
</div>

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;
}

JS中的代碼

//瀑布流效果
//初始化變量ajaxover來判斷ajax發送給HTML的數據是否加載完畢；這樣能夠避免滾動條滾動到底部連續發送ajax請求
var ajaxover=true;

//DOM加載完成時便執行一次ajax獲取數據
$(document).ready(function(){
loadMore();
});

//滾動條觸發事件；scroll是JQ內置事件
$(window).bind('scroll',function () {
// 當滾動到最底部以上100像素時， 加載新內容
if ($(document).height() - $(this).scrollTop() - $(this).height()<100){
if (ajaxover) { //當ajaxover爲真的時候，才執行loadMore()函數
loadMore();
}else {
return false;
}

}
});

//ajax異步讀取數據；遍歷後臺得到的數據，每次遍歷時對每一個li的高度進行遍歷判斷，得出最矮那個，將數據插入那裏面
function loadMore() {
ajaxover=false; //當執行loadMore()函數的時候，就將ajaxover改成false，這樣下面的ajax沒執行完的時候不會再執行loadMore
$.ajax({
url : ajaxHandle,
dataType : 'json',
type:'post',
data:{'page':page,'type':type},
success:function(content){
if(content.length>0){
//遍歷返回的數據(一個二維數組)
for (var i = 0; i < content.length; i++) {
//定義變量，對li遍歷時進行排序用
var $row,iHtight,iTempHeight;
// 找出當前高度最小的列, 新內容添加到該列
iHeight = -1;
$('#content li').each(function(){
iTempHeight = Number( $(this).height() );  //Number()將取出的高度轉換爲數值類型進行比較
if(iHeight==-1 || iHeight>iTempHeight) {
iHeight = iTempHeight;
$row = $(this);  //對高度進行排序後，將最矮的那個保存到變量中
}
});

//組裝輸出到HTML的數據
var item='<dl>';
//這裏的a連接不能直接使用U()方法；DOM加載完成後再加進去的連接是沒法解析的；link是在HTML中定義的用於解析的連接link='& lt;{:U("Index/Show/index","","")}>';這樣就能得到提交方法的地址了
item+='<dt>'+'<a href="'+link+'/id/'+content[i]['id']+'">'+content[i]['title']+'</a></dt>';
item+='<dd>'+content[i]['intro']+'</dd>';
item+='<hr/>';
item+='<div><span>'+content[i]['date']+'</span></div>';
item+='</dl>';

$row.append(item); //將數據插入到最矮的那個中
}
}else {
$(window).unbind('scroll'); //移除滾動條綁定的事件；這樣就會在得不到數據的時候終止滾動條事件，不會進行無心義的ajax請求了
}
ajaxover=true; //ajax返回給HTML的數據所有完成以後再將ajaxover設置爲true；注意是寫在success的函數裏
}
});
page++; //每加載一次頁數加一（原理相似分頁）
}

PHP中的代碼

//瀑布流的ajax異步數據傳輸
public function ajax(){
$page=$_POST['page']; //獲取ajax發送過來的頁數-第幾頁
$type=$_POST['type']; //獲取ajax發送過來的類型-Android、iPhone、WindowsPhone、Other
//每次取出10條數據
$pagesize=15;
$m=M('article');
//limit(($page-1)*$pagesize,$pagesize);從第幾條開始取，取出幾條；用頁數來判斷從第幾條開始取
$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');
}
}

要點：一、經過ajaxover=true; 這樣的方式來防止連續觸發事件二、數據庫返回的json數據能夠是二維數組，在JS中按照數組方式對其進行遍歷便可三、能夠經過bind()來綁定事件，也能夠經過unbind()來移除事件四、 在JS中返回的數據的連接不能直接使用U()方法，由於DOM已經加載完了，經過AJAX異步過來的U()不會解析，因此須要先在模版中定義var link='<{:U("Index/Show/index","","")}>'; 在JS中用這個變量來進行連接地址的拼接'<a href="'+link+'/id/'+content[i]['id']+'">'五、瀑布流的原理其實和分頁相似，經過頁數來判斷獲取的數據