jquery实现瀑布流的方式
jquery瀑布流实现的形式多种 今天自己无聊写的一个小demo 废话不多说 上码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>jquery 实现瀑布流效果</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<div id="content"></div>
<div id="loader"></div>
</body>
</html>
下面是js代码
/**
*瀑布流的效果插件的形式
*/
;(function($,window,document,undefined){
function Waterfall(ele,opt){
this.defaults = {
'container':ele,//容器
'width':200,
'ispace':10,
'url':'http://www.wookmark.com/api/json/popular?callback=?'
}
this.setings = $.extend({},this.defaults,opt);
this.iCells = 0;//总共多少列
this.outerWidth = this.setings.width + this.setings.ispace;
this.iPage = 0;
this.arrT = [];
this.arrL = [];
//this.sUrl = 'http://www.wookmark.com/api/json/popular?callback=?';
this.iBtn = true;
}
Waterfall.prototype = {
'init':function(){
this.getCell();
this.setTop();
this.getData();
this.scroll();
this.resize();
},
'getCell':function(){//获取总共的列数
this.iCells = Math.floor($(window).width()/this.outerWidth);
if(this.iCells<2){
this.iCells = 3;
}else if(this.iCells>8){
this.iCells = 8;
}
this.setings.container.width(this.iCells*this.outerWidth-10);
},
'setTop':function(){//计算每列的left 和 top
for(var i=0;i<this.iCells;i++){
this.arrT[i] = 0;
this.arrL[i] = i*this.outerWidth;
}
},
'getData':function(){//获取数据
var _this = this;
if(!this.iBtn) return;
this.iBtn = false;
this.iPage++;
console.log(this.setings.url);
$.getJSON(this.setings.url,{page:this.iPage},function(data){
$.each(data,function(index,obj){
var $img = $('<img />');
//console.log(_this.setings.width);
var iHeight = obj.height*(_this.setings.width/obj.width);
$img.css({
'width':_this.setings.width,
'height':iHeight
});
var _index = _this.getMin();
$img.css({
'left':_this.arrL[_index],
'top':_this.arrT[_index]
})
var objImg = new Image();
objImg.onload = function(){
$img.attr('src',this.src);
}
objImg.src = obj.preview;
_this.setings.container.append($img);
_this.arrT[_index] += iHeight+10;
_this.iBtn = true;
});
});
},
'getMin':function(){//获取最小值
var Min = this.arrT[0];
var _index = 0;
for(var i=0;i<this.arrT.length;i++){
if(this.arrT[i]<Min){
Min = this.arrT[i];
_index = i;
}
}
return _index;
},
'scroll':function(){//滚轮的事件
var _this = this;
$(window).on('scroll',function(){
var iH = $(window).height() + $(window).scrollTop();
var _index = _this.getMin();
if(_this.arrT[_index]+50<iH){//当最小列数的top 小于 可视窗口+滚动的距离时加载一页数据
_this.getData();
}
});
},
'resize':function(){
var _this = this;
$(window).on('resize',function(){
var oldlen = _this.iCells;
_this.getCell();
if(_this.iCells==oldlen){
return;
}
_this.arrT = [];
_this.arrL = [];
for(var i=0;i<(_this.iCells);i++){
_this.arrT[i] = 0;;
_this.arrL[i] = i*(_this.outerWidth);
}
var _index;
console.log(_this.arrL);
_this.setings.container.find('img').each(function() {
_index = _this.getMin();
$(this).stop().animate({
'left':_this.arrL[_index],
'top' :_this.arrT[_index]
},1000);
_this.arrT[_index]+=$(this).height()+10;
});
});
}
}
$.fn.waterfall = function(options){
var oWaterFall = new Waterfall(this,options);
return oWaterFall.init();
}
})(jQuery,window,document);
瀑布流执行方式简单的插件调用
$(function(){
$('#content').waterfall({
'width':300,
'ispace':30,
'url':'http://www.wookmark.com/api/json/popular?callback=?'
});
});
第一次写这样的博客 欢迎大家吐糟
