jQuery實現(xiàn)瀑布流的取巧做法分享
更新時間：2015年01月12日 11:30:04 投稿：hebedich
這篇文章主要介紹了jQuery實現(xiàn)瀑布流的取巧做法分享,需要的朋友可以參考下
分析：瀑布流，做法有2種
（1）絕對定位方案：每個單元格設(shè)置為絕對定位，通過計算，分別設(shè)置 top , left 即可實現(xiàn)
（2）浮動方案：弄N列布局（浮動），然后圖片數(shù)據(jù)，按順序依次插入，如N為3列 ，第一張圖片插入到第一列，第二張圖片插入到第二列，第三張圖片插入到第三列，第四張圖片插入到第一列........這樣循環(huán)插入（不能自適應(yīng)）
CSS與HTML代碼：
復(fù)制代碼 代碼如下:
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;}
復(fù)制代碼 代碼如下:
<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實現(xiàn)，大概思路如下：
?。?）獲取N列中 最小的高度值，JS提供的API是Math.min()，但這個API最多只能傳入 2 個參數(shù)，所以就需要用aplly來擴展，Math.min.apply(null,[xxx,xxx,xxxx,xxxx])
（2）給 window 綁定 scroll事件，下拉的時候獲取 $(document).scrollTop() ， 當(dāng) $(document).scrollTop() 大于 最小的高度值，就ajax請求url，如果有數(shù)據(jù)，就往頁面插入HTML結(jié)構(gòu)，沒有則提示 “加載完”，然后window解綁此事件
復(fù)制代碼 代碼如下:
// 數(shù)據(jù)格式
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,//列數(shù)
page = 1,//ajax請求的頁碼值
url = 'xxxx', //ajax請求地址
on_off = true; //插入結(jié)構(gòu)的開關(guān)，防止ajax錯誤性多次加載數(shù)據(jù)
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');
/* 模擬測試-設(shè)置定時器模擬ajax請求數(shù)據(jù)
-----------------------*/
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('數(shù)據(jù)已加載完');
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();
相關(guān)文章
Jquery 數(shù)據(jù)選擇插件Pickerbox使用介紹
目前市面上很少見或幾乎沒有這數(shù)據(jù)(對象)選擇插件.比如,點擊input , select 元素時彈出div(窗口),載入數(shù)據(jù)讓用戶選擇數(shù)據(jù),選擇后在填充回對應(yīng)的元素.2012-08-08
jQuery remove() 方法也可接受一個參數(shù)，允許您對被刪元素進(jìn)行過濾。下面通過實例代碼給大家介紹jQuery remove()過濾被刪除的元素，需要的的朋友參考下吧2017-07-07
前段時間項目需要用到雙向列表選擇，想直接用select，結(jié)果發(fā)現(xiàn)某些樣式不支持，只好用div模擬了以下.大家根據(jù)個人需要適當(dāng)添加，對jquery雙向選擇器知識感興趣的朋友一起看看吧2016-11-11
javascript向后臺傳送相同屬性的參數(shù)即數(shù)組參數(shù)
在傳送參數(shù)時，經(jīng)常會碰到向后臺傳送一些相同屬性的參數(shù)，最好的選擇是采用數(shù)組的方式，下面有個不錯的示例，大家可以參考下2014-02-02
jQuery使用正則表達(dá)式限制文本框只能輸入數(shù)字
本文主要介紹jQuery中使用正則表達(dá)式限制文本框只能輸入數(shù)字的功能，希望能幫到大家，有需要的朋友可以參考一下。2016-06-06
用示例說明filter()與find()的用法以及children()與find()的區(qū)別分析
本篇文章介紹了，用示例說明filter()與find()的用法以及children()與find()的區(qū)別分析。需要的朋友參考下2013-04-04
JQuery和HTML5 Canvas實現(xiàn)彈幕效果
這篇文章主要介紹了JQuery和HTML5 Canvas兩種方法實現(xiàn)彈幕效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
Jquery左右滑動插件之實現(xiàn)超級炫酷動畫效果附源碼下載
這是一款基于jquery.pogo-slider插件實現(xiàn)的多個滑塊切換特效。本篇文章給大家介紹Jquery左右滑動插件之實現(xiàn)超級炫酷動畫效果，對jquery左右滑動插件相關(guān)知識感興趣的朋友參考下2015-12-12
這是一款很實用的jQuery焦點圖動畫插件，跟其他jQuery焦點圖插件不同的是，它帶有一個水平的滑桿，你可以通過滑動滑桿實現(xiàn)圖片的切換，也可以通過點擊圖片來切換2016-03-03
這篇文章主要介紹了jQuery Ajax通用js封裝的實例代碼，非常不錯，具有參考借鑒價值，感興趣的朋友一起學(xué)習(xí)吧2016-06-06