基于jQuery的瀑布流效果

基于jQuery的瀑布流效果

*{margin:0; padding:0;}
body{background-color:#efefef;}
ul,li{list-style: none;}
.container{margin:20px 0;}
.container ul{margin:0 auto; position: relative;}
.container ul li{position: absolute; width:270px; padding:10px; border:1px solid #ddd; background-color: #fff; box-shadow: 1px 3px 3px #ddd;}
.container ul li img{width:270px;}
.container ul li h3{font-size: 18px; color:#333; line-height: 30px; font-weight: normal;}
.container ul li p{font-size: 14px; line-height: 20px; color:#999;}

<div class="container">
<ul id="container"></ul>
</div>

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
<script type="text/javascript" src="./waterFall.js"></script>
<script type="text/javascript">
$(function(){
//调用瀑布流插件
$("#container").waterFall({
iWidth:300,
iSpace:10,
iUrl:'https://api.douban.com/v2/movie/top250',
backFn:function(obj,data){
var str = '<li><img src="'+ data.images.small +'" width="270" height="385"/><h3>'+ data.title +'</h3><p>'+ data.title + data.title + data.title + data.title + data.title +'</p></li>';
obj.append(str)
}
})
})
</script>

/*Mr Zhang*/
/*瀑布流插件*/
$(function(){
var wf = {
init:fun
4000
ction(obj,args){
wf.setClumn(obj,args);
wf.getData(obj,args);
wf.initData(obj,args);
wf.setResize(obj,args);
wf.setScroll(obj,args);
},
setClumn:function(obj,args){
var iClumnWidth = args.iWidth + args.iSpace;
var iClumn = 0;
iClumn = Math.floor($(window).innerWidth() / iClumnWidth);
//设置iClumn的边界值
if(iClumn < 3){
iClumn = 3;
}
if(iClumn > 6){
iClumn = 6;
}
//设置容器宽度
obj.css('width',iClumnWidth * iClumn)
args.iClumn = iClumn;
},
getData:function(obj,args){
$.ajax({
url:args.iUrl + '?start=' + args.pageNum * 20,
type:'get',
dataType:'jsonp',
success:function(data){
//args.backFn(obj,data);
var oData = data.subjects;
$.each(oData,function(idx,item){
wf.getMini(obj,args);
args.backFn(obj,item);
obj.find('li').last().css({
left:args.arrL[args.oIndex],
top:args.arrT[args.oIndex]
})
wf.setData(obj,args);
args.oSys = true;
})
if(args.pageNum * 20 > data.total){
return false;
}
}
})
},
initData:function(obj,args){
args.arrT = [];
args.arrL = [];

for(var i = 0; i < args.iClumn; i++){
args.arrT.push(0);
}

for(var i = 0; i < args.iClumn; i++){
args.arrL.push((args.iWidth + args.iSpace) * i)
}

},
setData:function(obj,args){
var oLi = obj.find("li");
args.arrT[args.oIndex] = oLi.last().position().top + oLi.last().innerHeight() + args.iSpace;
},
getMini:function(obj,args){
var arrMini = args.arrT[0];
args.oIndex = 0;
for(var i = 0; i < args.arrT.length; i++){
if(arrMini > args.arrT[i]){
arrMini = args.arrT[i];
args.oIndex = i;
}
}
},
setResize:function(obj,args){
$(window).on("resize",function(){
wf.setClumn(obj,args);
wf.initData(obj,args);

obj.find("li").each(function(){
//获取其中最小top值的索引
wf.getMini(obj,args);
$(this).animate({
left:args.arrL[args.oIndex],
top:args.arrT[args.oIndex]
})
//重新设置arrT
args.arrT[args.oIndex] = args.arrT[args.oIndex]  + $(this).innerHeight() + args.iSpace;
})

})
},
setScroll:function(obj,args){
$(window).on("scroll",function(){
if(args.arrT[args.oIndex] < $(window).innerHeight() + $(document).scrollTop()){
if(args.oSys){
args.oSys = false;
args.pageNum++;
wf.getData(obj,args)
}
}
})
}
}

$.fn.waterFall = function(options){
var args = $.extend({
iWidth:300,     //每一项的宽度
iSpace:10,//每一项的间隔
iUrl:'',//请求的api接口地址
iClumn:0,//总共的列数
arrT:[],
arrL:[],
oIndex:0,
pageNum:0,//初始的分页页码
oSys:false,
backFn:function(obj,data){}//每一条数据的回调函数
},options);
//初始化
wf.init(this,args)
}
})