在上篇博客中已经完成了瀑布流的js代码，现在就要把这个js代码抽出并写成插件。
1.首先把html中的js代码抽离成为单独js文件
2.$.fn.waterfall = function(data) { //定义插件的名称，这里名为waterfall
var set = {
//这里写插件定义的变量和默认值
}
var opt = $.extend({}, set, data); //这是把插件的默认值set和调用插件时传入的参数值data合并在一起，若值重复后面的数组data会覆盖掉前面的数组set
...
}
3.调用插件：
<script type="text/javascript">
$(function(){
$(‘.box‘).waterfall( //要应用插件的容器div名
{
//需要修改和传递的参数
}
)
});
</script>
4.源代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,minimal-ui" />
<title>waterfall</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.container{
margin: 10px auto 10px;
position: relative;
}
.container img{
position: absolute;
}
.loader{
width: 100%;
height: 60px;
background: url(‘loader.gif‘) no-repeat center #fff;
position: fixed;
bottom: 0;
left: 0;
}
</style>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="waterfall.js"></script>
<script type="text/javascript">
$(function(){
$(‘.box‘).waterfall(
{
oContainer: ‘.container‘,
sUrl:‘http://www.wookmark.com/api/json/popular?callback=?‘ ,
iWidth:50
}
)
});
</script>
</head>
<body>
<div class="box">
<div class="container"></div>
<div class="loader"></div>
</div>
</body>
</html>
$(function(){
$.fn.waterfall = function(data) {
var set = {
‘oContainer‘ : ‘.container‘, //放瀑布流图片的div的类名
‘oloader‘ : ‘.loader‘, //放加载图片的div的类名
‘iWidth‘ : 200, //列宽
‘iSpace‘ : 10, //间隙
‘sUrl‘ :‘http://www.wookmark.com/api/json/popular?callback=?‘, //数据的url
‘type‘ : ‘img‘, //数据的类型
‘ipage‘:0, //数据的页数
}
//合并两个数组，后面数组data的数据覆盖前面数组set的数据，
var opt = $.extend({}, set, data);
// console.log(opt)
var iBtn=true;//设置一个变量使得一页数据输出完成后再获取输出下一页数据
var that=this;
var iCells=0; //初始化列数为0
var container=$(opt.oContainer);
var iOuterWidth=opt.iWidth+opt.iSpace; //图片实际宽度=列宽+间隙
var arrL=[]; //定位的左边的宽度数组
var arrT=[]; //定位的上边的高度数组
//根据窗口的大小和列宽设置列数
function setCells(){
iCells=Math.floor(that.innerWidth()/iOuterWidth);
container.css(‘width‘,iOuterWidth*iCells-opt.iSpace);
}
setCells();
//先初始化数组，确定第一行图片定位的宽高
for(var i=0;i<iCells;i++){
arrT.push(0);
arrL.push(i*iOuterWidth);
}
//获取一行中高度最小的列，把新图片加到最小高度的列
function getMin(){
var iv=arrT[0];
var _index=0;
for(var i=0;i<arrT.length;i++){
if(arrT[i]<iv){
iv=arrT[i];
_index=i;
}
}
return _index;
}
function getMax(){
var iv=arrT[0];
var _index=0;
for(var i=0;i<arrT.length;i++){
if(arrT[i]>iv){
iv=arrT[i];
_index=i;
}
}
return _index;
}
// 获取数据输出
function getData(){
if(iBtn){
iBtn=false;
$(opt.oloader).show();//显示加载图片
$.getJSON(opt.sUrl,‘page+=opt.ipage‘,function(data){
// console.log(data);
$.each(data,function(index,obj){
//设置图片的链接，追加在放瀑布流图片的div里
var oImg=$(‘<img />‘);
oImg.attr(‘src‘,obj.preview);
container.append(oImg);
//算出图片的实际高度
var iHeight=opt.iWidth/obj.width*obj.height;
//设置图片的实际宽高
oImg.css({
width : opt.iWidth,
height : iHeight
})
//获取上一行图片中的最小高度，把新图片追加在最小高度的图片之下
var iMinIndex=getMin();
var iMaxIndex=getMax();
container.css(‘height‘,arrT[iMaxIndex]);
// 设置定位
oImg.css({
left : arrL[iMinIndex],
top : arrT[iMinIndex]
});
//上下图片加多10px的间隙
arrT[iMinIndex]+=iHeight+10;
//图片加载完成就把加载图片隐藏
$(opt.oloader).hide();
iBtn=true;
})
//使其一开始时就触发scroll事件来判断数据是否需要加载下一页
if(opt.ipage<2){
$(window).trigger(‘scroll‘);
}
})
}
}
getData();
//当滑动鼠标时触发函数判断是否需要加载下一页的数据
$(window).on(‘scroll‘,function(){
var iH=$(window).scrollTop()+$(window).innerHeight();
var iMinIndex=getMin();
if(arrT[iMinIndex]+container.offset().top<iH){
opt.ipage++;
getData();
}
});
//当窗口大小改变时，重新调整图片。即响应式设计
$(window).on(‘resize‘, function() {
var iLen = iCells;
setCells();
if (iLen == iCells) {
return ;
}
arrT = [];
arrL = [];
for (var i=0; i<iCells; i++) {
arrT[i] = 0;
arrL[i] = iOuterWidth * i;
}
container.find(‘img‘).each(function() {
var _index = getMin();
// $(this).css({
// left : arrL[_index],
// top : arrT[_index]
// });
$(this).animate({
left : arrL[_index],
top : arrT[_index]
}, 1000);
arrT[_index] += $(this).height() + 10;
});
})
}
})
时间： 2024-08-25 20:28:26