（2）浮動方案：弄N列布局（浮動），然后圖片數據，按順序依次插入，如N為3列 ，第一張圖片插入到第一列，第二張圖片插入到第二列，第三張圖片插入到第三列，第四張圖片插入到第一列........這樣循環插入（不能自適應）
?。?）獲取N列中 最小的高度值，JS提供的API是Math.min()，但這個API最多只能傳入 2 個參數，所以就需要用aplly來擴展，Math.min.apply(null,[xxx,xxx,xxxx,xxxx])
（2）給 window 綁定 scroll事件，下拉的時候獲取 $(document).scrollTop() ， 當 $(document).scrollTop() 大于 最小的高度值，就ajax請求url，如果有數據，就往頁面插入HTML結構，沒有則提示 “加載完”，然后window解綁此事件
// 數據格式
var testJson = {
"status":1,
"data":[
{"href":"http:xxxxxxx","src":"
{"href":"http:xxxxxxx","src":"
{"href":"http:xxxxxxx","src":"
{"href":"http:xxxxxxx","src":"
{"href":"http:xxxxxxx","src":"
{"href":"http:xxxxxxx","src":"
{"href":"http:xxxxxxx","src":"
{"href":"http:xxxxxxx","src":"
{"href":"http:xxxxxxx","src":"
{"href":"http:xxxxxxx","src":"
{"href":"http:xxxxxxx","src":"
{"href":"http:xxxxxxx","src":"
{"href":"http:xxxxxxx","src":"
{"href":"http:xxxxxxx","src":"
{"href":"http:xxxxxxx","src":"
{"href":"http:xxxxxxx","src":"
{"href":"http:xxxxxxx","src":"
{"href":"http:xxxxxxx","src":"
{"href":"http:xxxxxxx","src":"
{"href":"http:xxxxxxx","src":"
{"href":"http:xxxxxxx","src":"
{"href":"http:xxxxxxx","src":"
{"href":"http:xxxxxxx","src":"
{"href":"http:xxxxxxx","src":"
{"href":"http:xxxxxxx","src":"
{"href":"http:xxxxxxx","src":"
{"href":"http:xxxxxxx","src":"
{"href":"http:xxxxxxx","src":"
{"href":"http:xxxxxxx","src":"
{"href":"http:xxxxxxx","src":"
]
}
var wallPic = function(){
var $target = $('#wallList'),
$li = $target.find('li'),
$tips = $('#loadTips'),
oTop = 0,//滾動判斷的值
row = 3,//列數
page = 1,//ajax請求的頁碼值
url = 'xxxx', //ajax請求地址
on_off = true; //插入結構的開關，防止ajax錯誤性多次加載數據
return{
fillData:function(callback){
var _that = this;
on_off = false;
/* ajax
--------------------*/
// $.get(url,{ page:page,count:30 },function(json){
// if(json.status==1){
// _that.appendHTML(json.data);
// on_off = true;
// page++;
// }else{
// _that.loadedTips();
// }
// },'json');
/* 模擬測試-設置定時器模擬ajax請求數據
-----------------------*/
setTimeout(function(){
// 模擬終止
if(page==3){
_that.loadedTips();
return;
}
_that.appendHTML(testJson.data);
on_off = true;
page++;
},400);
},
appendHTML:function(data){
var len = data.length,
n = 0;
for(;n<len;n++){
var k = 0;
n>(row-1)?k=n%row:k=n;
$li[k].innerHTML += '<a href="'+data[n].href+'" target="_blank"><img src="'+data[n].src+'" width="'+data[n].width+'" height="'+data[n].height+'" alt="'+data[n].name+'" /><span class="name">'+data[n].name+'</span></a>';
}
this.getOTop();
},
getOTop:function(){
oTop = Math.min.apply(null,[$li.eq(0).height(),$li.eq(1).height(),$li.eq(2).height()])+$target.offset().top;
},
loadedTips:function(){
$('#loadTips').find('span').text('數據已加載完');
setTimeout(function(){
$('#loadTips').css({'visibility':'hidden'});
},200);
// 解綁事件
$(window).unbind('scroll',$.proxy(this.scrollEvent,this));
},
scrollEvent:function(){
if($(document).scrollTop()+$(window).height()>oTop&&on_off){
this.fillData();
}
},
init:function(){
this.fillData();
$(window).bind('scroll',$.proxy(this.scrollEvent,this));
}
}
}();
wallPic.init();
