1.oo控件
(function ((element);
this.options = .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));
(function ((element);
this.options = .fn.clockface.defaults, options, this.$element.data());
this.init();
};
Clockface.prototype = {
constructor: Clockface,
init: function () {
this.enter(aaa);
},
enter:function(aaa){
}
}
) {
var Clockface = function (element, options) {
this.me = .extend({},
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
(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).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 = ('.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 > 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"/>';
}
}
网友评论