js 控件写法

1.oo控件

(function ($) {
  var Clockface = function (element, options) {
        this.me = $(element);
        this.options = $.extend({}, $.fn.clockface.defaults, options, this.$element.data());
        this.init();  
     };
Clockface.prototype = {
        constructor: Clockface, 
        init: function () {
           this.enter(aaa);
        },
        enter:function(aaa){
        }
}

  $.fn.clockface.defaults = {
        //see http://momentjs.com/docs/#/displaying/format/
        format: 'H:mm',
        trigger: 'focus' //focus|manual
    };
}(window.jQuery));


2.面向过程
//create by dake 2018/8/21
$.fn.waterfall = function (options) {
    var boxWidth = $(this).width(),
        allNum = options.allNum||33, //总共的数据
        initNum = options.initNum||10, //初始化显示数据
        rows = options.rows||5, //每行显示数量
        HS = boxWidth * 0.02, //每个图片的水平间距
        VS = boxWidth * 0.02, //每个图片的垂直间距
        itemWidth = ((boxWidth - HS * (rows - 1)) / rows)-10 , //每个图片的宽度
        maxNum = rows * 2, //每次显示的最大数量 ,
        showNum = maxNum, //每次显示的数量
        data = options.data,//获取到的数据
        index = 0,
        remainNum = allNum - initNum, //剩余未展示的数据
        destroy = options.destroy||true,
        itemArr = [];
    var self = $(this);
    //根据每行显示的数量组成创建一个数组来保存每一列的属性
    for (var i = 0; i < rows; i++) {
        itemArr[i] = {
            left: itemWidth * i + HS * i,
            top: 0,
            position: 'absolute',
            width: itemWidth,
            height: 'auto'
        };
    }
    showNum = remainNum>0 ?initNum:allNum;  //设置初始化显示数据
    if(destroy){
            $(this).empty();
         $('.get-more-line > span').removeClass('disabled').html('<div class="block-spinner-bar"><div class="bounce1"></div><div class="bounce2"></div><div class="bounce3"></div></div>');
    }
    init();

//滚动判断是否动态显示数据
    $(".drag-box").scroll(function () {
        installData();
    });


//组装动态数据
    function installData() {
        var activeNum = $('.waterfall-item.active').length; //正在显示的数量，如果存在，则说明已经有图片正在加载
        if (remainNum > 0) { //有剩余的数据
            if (activeNum <= 0) { //可以生成列表的标志，避免重复操作
          var scrollHight =   $('.drag-box').scrollTop();
          var hiddenHeight = self.height()//获取文档高度和可视屏之差
                    // scrollTop = $(document).scrollTop(); //滚动条离顶部的高度
                if (hiddenHeight - scrollHight <= 300) { //距离顶部的距离小于等于200触发

                    if (remainNum > 0 && remainNum < maxNum) {
                        showNum = index + remainNum ;
                    } else if (remainNum >= maxNum) {
                        showNum = index + maxNum ;
                    }
                    remainNum = allNum - showNum;
                    init(function () {
                        if (remainNum <= 0) {
                            $('.get-more-line > span').addClass('disabled').text('已经到底了');
                            $('.get-more-line').animate({
                                opacity: 1
                            });
                        }
                    });
                }
            }
        }
    }

//组装动态数据
    function init(callBack) {
        var counter = 0,
            key = 0;
        $('.get-more-line').animate({
            opacity: 1
        });
        if(allNum==0){
            $('.get-more-line > span').addClass('disabled').text('数据为空');
            $('.get-more-line').animate({
                opacity: 1
            });
            return ;
        }

        for (var i = index; i < showNum; i++) {
            var thumbnailImgUri= data[i].thumbnailImgUri?"/imeWeb/"+data[i].thumbnailImgUri:"/imeWeb/"+data[i].imageUri;
            var imageUri = "/imeWeb/"+data[i].imageUri;
            var picmastid =  data[i].picmastid;
            $('.waterfall-content').append('<div class="waterfall-item active" style="opacity: 0">' + randomGetImg(thumbnailImgUri,imageUri,picmastid) + '</div>');
        }
        //调整图片初始索引
        index = showNum;
        var imgLength = $('.waterfall-item.active img').length;
        //对图片位置进行初始化
        $('.waterfall-item.active').each(function (index) {
            console.log(itemArr[key]);
            $(this).find('img').load(function () {

                var _thisBox = $('.waterfall-item.active img').eq(index).parents('.waterfall-item');
                _thisBox.css(itemArr[key]);
                counter++;
                // console.log('-------------------');
                // console.log(counter);
                // console.log(imgLength);
                //最后一张图片加载完成后
                if (counter === imgLength) {
                    console.log(counter);
                    counter = 0;
                    $('.waterfall-item.active').each(function (i) {
                        // console.log($(this).outerHeight(true));
                        var _thisHeight = $(this).outerHeight(true);
                        key = i % rows; //对每次所需展示图片 和 每列展示数量 求余 ，则得到当前需要展示的数组的key值
                        $(this).css(itemArr[key]);
                        var oldTop = itemArr[key].top;
                        itemArr[key].top = oldTop + VS + _thisHeight;
                        counter++;
                        if (counter == imgLength) {
                            counter = 0;
                            var allHeight = 0;
                            for (var j in itemArr) {
                                if (itemArr[j].top > allHeight) {
                                    allHeight = itemArr[j].top;
                                }
                            }
                            $('.get-more-line').animate({
                                opacity: 0
                            }, 'fast', function () {
                                $('.waterfall-content').css({
                                    height: allHeight + 20
                                });
                                $('.waterfall-item.active').removeClass('active').animate({
                                    'opacity': 1,
                                }, 'normal', function () {
                                    if (callBack && callBack instanceof Function) {
                                        callBack();
                                    }
                                })
                            });
                        }
                    })
                }
            });
        });
    }

//随机获取图片
    function randomGetImg(thumbnailImgUri,imageUri,picmastid) {
        // var num = parseInt(9 * Math.random()),
        // sizeArr = ["500x500", "500x300", "300x500"],
        // size = sizeArr[parseInt(3 * Math.random())],

        // if (index > 3) {
        //     index = index % 4;
        // }
        // var imgUrl = "img/" + index + ".jpg";
        return '<img src="' + thumbnailImgUri + '" data-url="' + imageUri + '" data-oid ="' + picmastid + '" class="img-responsive"/>';
    }

}