我的第一个jQuery插件--瀑布流插件

浏览数：39 / 时间：2015年06月09日

在上篇博客中已经完成了瀑布流的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>

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;
                
            });
        })
    }
})