php 實現瀑布流布局 代碼

<ul id="stage">
<!– 加載瀑布流的內容 –>
</ul>

javascript代碼：
var json = "";//存放服務器返回的數據
var sentIt = true; //方式ajax重復請求服務器
var now_page = 0; //判斷當前頁面所取數據的頁數
$(document).ready(function(){
loadMore(); //一次加載所有瀑布流的數據
});

//窗口的監聽事件
$(window).scroll(function(){
if ($(document).height() - $(this).scrollTop() - $(this).height()<100 && sentIt){
sentIt = false;
loadMoresoft();
setTimeout(function(){sentIt = true;},600);
imgCenter();
}
});

//請求服務器數據
function loadMore(){
$.ajax({
type:'GET',
url:'/index.php',
data:"ac=index_data",
dataType:'json',
success : function(re_json){
if(typeof re_json == 'object'){
json = re_json;
now_page = 0;
loadMoresoft();
}
}
});
}

//頁面加載數據，裡面有一些分頁的判斷
function loadMoresoft(){
var oProduct;
var page_size = 12;
var soft_total = json.length;
var all_page = Math.ceil(soft_total/page_size);
now_page = parseInt(now_page);
if(now_page+1 >= all_page){
$("#loading").remove();
return;
}

var next_page = parseInt(now_page) + 1;
var soft_index = page_size*now_page;
if(soft_index < 0)soft_index = 0;
var next_index = page_size*next_page;
if(next_index >= soft_total){
next_index = soft_total;
}
next_index = next_index-1;

for(var i=soft_index; i<=next_index; i++){
oProduct = json[i];
var tag_css = "tag";
var show_type = oProduct.show_type;
var rate = oProduct.rate;
var star = Math.ceil(rate*100/5);
var rate_count = oProduct.rate_count;
var rate_str='';
if(rate_count == 0){
rate_str = "No";
}else if(rate_count < 10){
rate_str = "<10";
}else{
rate_str = rate_count;
}
if(show_type == 1){
var new_price = oProduct.now_price;
if(new_price == "Free"){
tag_css = "tag tagFreeLimit";
}else{
tag_css = "tag tagPriceDrop";
}
}
if(show_type == 2){
tag_css = "tag tagUpdate";
}
if(show_type == 3 || show_type == 4){
tag_css = "tag";
}
var soft_url = domain+""+oProduct.url_soft+"_for_ipad-"+oProduct.soft_id+".html";
var html = '';
html += '

'; ………… //省略要加載的html代碼，你可以把要加載的html代碼放在這 html += '

'; $('#stage').append(html); } now_page = next_page; }

javascript代碼是一次把服務器上所有的數據全部請求過來，然後再頁面進行分頁顯示。