jQuery實現瀑布流的取巧做法分享
這篇文章主要介紹了jQuery實現瀑布流的取巧做法分享,需要的朋友可以參考下
分析：瀑布流，做法有2種
（1）絕對位置方案：每個儲存格設定為絕對位置，通過計算，分別設定 top , left 即可實現
（2）浮動方案：弄N列布局（浮動），然後圖片資料，按順序依次插入，如N為3列 ，第一張圖片插入到第一列，第二張圖片插入到第二列，第三張圖片插入到第三列，第四張圖片插入到第一列........這樣迴圈插入（不能自適應）
CSS與HTML代碼：
複製代碼 代碼如下:
body,ul,li{margin:0;margin:0;}
ul{list-style:none;}
.clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both; height:0;}.clearfix{*zoom:1}
/*瀑布流*/
.wallList{width:860px;}
.wallList li{float:left;display:inline;margin-right:16px;}
.wallList li a{background:#eee;border:1px solid #ccc;padding:5px 5px 0 5px;display:block;margin-bottom:10px;}
.wallList li a:hover{border-color:#f60;}
.wallList li .name{display:block;text-align:center;padding:8px 0;}
.loadTips{text-align:center;padding:15px 0;}
複製代碼 代碼如下:
<div class="wallList" id="wallList">
<ul class="clearfix">
<li></li>
<li></li>
<li></li>
</ul>
<p class="loadTips" id="loadTips"><span>正在載入......</span></p>
</div>
使用jQuery實現，大概思路如下：
（1）擷取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":"http://dummyimage.com/240x300/B5E61D/fff","width":240,"height":300,"name":"圖片1"},
{"href":"http:xxxxxxx","src":"http://dummyimage.com/240x210/333/fff","width":240,"height":210,"name":"圖片2"},
{"href":"http:xxxxxxx","src":"http://dummyimage.com/240x190/f60/fff","width":240,"height":190,"name":"圖片3"},
{"href":"http:xxxxxxx","src":"http://dummyimage.com/240x230/B5E61D/fff","width":240,"height":230,"name":"圖片4"},
{"href":"http:xxxxxxx","src":"http://dummyimage.com/240x280/B5E61D/fff","width":240,"height":280,"name":"圖片5"},
{"href":"http:xxxxxxx","src":"http://dummyimage.com/240x260/eee/fff","width":240,"height":260,"name":"圖片6"},
{"href":"http:xxxxxxx","src":"http://dummyimage.com/240x180/000/fff","width":240,"height":180,"name":"圖片7"},
{"href":"http:xxxxxxx","src":"http://dummyimage.com/240x240/B5E61D/fff","width":240,"height":240,"name":"圖片8"},
{"href":"http:xxxxxxx","src":"http://dummyimage.com/240x265/B5E61D/fff","width":240,"height":265,"name":"圖片9"},
{"href":"http:xxxxxxx","src":"http://dummyimage.com/240x245/259/fff","width":240,"height":245,"name":"圖片10"},
{"href":"http:xxxxxxx","src":"http://dummyimage.com/240x310/B5E61D/fff","width":240,"height":310,"name":"圖片11"},
{"href":"http:xxxxxxx","src":"http://dummyimage.com/240x210/B5E61D/fff","width":240,"height":210,"name":"圖片12"},
{"href":"http:xxxxxxx","src":"http://dummyimage.com/240x150/B5E61D/fff","width":240,"height":150,"name":"圖片13"},
{"href":"http:xxxxxxx","src":"http://dummyimage.com/240x165/B5E61D/fff","width":240,"height":165,"name":"圖片14"},
{"href":"http:xxxxxxx","src":"http://dummyimage.com/240x100/B5E61D/fff","width":240,"height":100,"name":"圖片15"},
{"href":"http:xxxxxxx","src":"http://dummyimage.com/240x280/B5E61D/fff","width":240,"height":280,"name":"圖片16"},
{"href":"http:xxxxxxx","src":"http://dummyimage.com/240x225/B5E61D/fff","width":240,"height":225,"name":"圖片17"},
{"href":"http:xxxxxxx","src":"http://dummyimage.com/240x210/B5E61D/fff","width":240,"height":210,"name":"圖片18"},
{"href":"http:xxxxxxx","src":"http://dummyimage.com/240x230/B5E61D/fff","width":240,"height":230,"name":"圖片19"},
{"href":"http:xxxxxxx","src":"http://dummyimage.com/240x210/B5E61D/fff","width":240,"height":210,"name":"圖片20"},
{"href":"http:xxxxxxx","src":"http://dummyimage.com/240x300/B5E61D/fff","width":240,"height":300,"name":"圖片21"},
{"href":"http:xxxxxxx","src":"http://dummyimage.com/240x210/333/fff","width":240,"height":210,"name":"圖片22"},
{"href":"http:xxxxxxx","src":"http://dummyimage.com/240x190/f60/fff","width":240,"height":190,"name":"圖片23"},
{"href":"http:xxxxxxx","src":"http://dummyimage.com/240x230/B5E61D/fff","width":240,"height":230,"name":"圖片24"},
{"href":"http:xxxxxxx","src":"http://dummyimage.com/240x280/B5E61D/fff","width":240,"height":280,"name":"圖片25"},
{"href":"http:xxxxxxx","src":"http://dummyimage.com/240x210/eee/fff","width":240,"height":210,"name":"圖片26"},
{"href":"http:xxxxxxx","src":"http://dummyimage.com/240x180/000/fff","width":240,"height":180,"name":"圖片27"},
{"href":"http:xxxxxxx","src":"http://dummyimage.com/240x240/B5E61D/fff","width":240,"height":240,"name":"圖片28"},
{"href":"http:xxxxxxx","src":"http://dummyimage.com/240x195/B5E61D/fff","width":240,"height":195,"name":"圖片29"},
{"href":"http:xxxxxxx","src":"http://dummyimage.com/240x245/259/fff","width":240,"height":245,"name":"圖片30"}
]
}
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();
