我的第一个jQuery插件--瀑布流插件
在上篇博客中已经完成了瀑布流的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; }); }) } })
