-
Notifications
You must be signed in to change notification settings - Fork 0
/
ocask.js
174 lines (173 loc) · 6.89 KB
/
ocask.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
/**
* OCask.js by oceania
* A gallery layout with image
*
* config
* -----------------
* container : container's element
* baseHeight : row's minimum height,default with 200px
* imgArr : an array which store all the urls for image that you want to show
* isGap : how to show the last row's images, baseHeight with true, container's width with false,default with false
* responsive : show better layout when you resize the web page, default with false
* lightGallery : integrate lightgallery.js
* lightGalleryConf : lightgallery.js's config
* rowClass : add your own style class on every rows that contain the image
* imgClass : add your own style class on every images
*/
(function (root, fac) {
"use strict"
if (typeof module === 'object' && module.exports) {
module.exports = fac()
} else {
root.OCask = fac()
}
})(typeof window !== 'undefined' ? window : this, function () {
var OCask = function (ocaskConf) {
this.container = ocaskConf.container
this.conWidth = this.container.offsetWidth
this.baseHeight = ocaskConf.baseHeight || 200
this.imgArr = ocaskConf.imgArr
this.isGap = ocaskConf.isGap
this.responsive = ocaskConf.responsive
this.lightGallery = ocaskConf.lightGallery
this.lightGalleryConf = ocaskConf.lightGalleryConf ? ocaskConf.lightGalleryConf : {}
this.rowClass = ocaskConf.rowClass || ''
this.imgClass = ocaskConf.imgClass || ''
this.rowArr = []
this.cacheImg = []
this.cacheImgRow = []
}
function _setRow(ctx, img, imgIndex) {
var newRowW = 0
var newRowH = 0
var _this = ctx
_this.rowArr.push(img)
for (var i = 0; i < _this.rowArr.length; i++) {
newRowW += _this.rowArr[i].width
if (newRowW > _this.conWidth) {
_this.rowArr.pop()
if (i !== 0) {
newRowW = newRowW - img.width
newRowH = _this.conWidth * (_this.baseHeight / newRowW)
_genRow(_this, newRowH, false, false)
} else if (i === 0) {
_genRow(_this, _this.conWidth, true, false)
}
_this.rowArr = [img]
}
}
if (_this.rowArr.length !== 0 && imgIndex === _this.imgArr.length - 1) {
if (_this.rowArr.length === 1) {
_genRow(_this, _this.conWidth, true, true)
return
}
if (_this.isGap) {
newRowH = _this.baseHeight
_genRow(_this, newRowH, false, true)
} else {
newRowH = _this.conWidth * (_this.baseHeight / newRowW)
_genRow(_this, newRowH, false, true)
}
}
}
function _genRow(ctx, rowFlag, isOne, lastOne) {
var _this = ctx
var imgRow = document.createElement('div')
imgRow.style.whiteSpace = "nowrap"
var tempWidthArr = []
var tempHeight = 0
for (var i = 0; i < _this.rowArr.length; i++) {
var img = _this.rowArr[i]
if (!isOne) {
var tempWidth = Math.round(img.scale * rowFlag)
tempWidthArr.push(tempWidth)
tempHeight = Math.round(rowFlag)
if (!ctx.isGap && i === _this.rowArr.length - 1) {
var j = i + 1
var resultWidth = 0
while (j--) {
resultWidth += tempWidthArr[j]
}
var diffWidth = _this.conWidth - resultWidth
if (diffWidth > 0 || diffWidth < 0) {
tempWidth += diffWidth
}
}
img.dom.height = tempHeight
img.dom.width = tempWidth
} else {
tempHeight = Math.round(img.height / img.width * rowFlag)
img.dom.width = rowFlag
img.dom.height = tempHeight
}
_this.imgClass ? img.dom.setAttribute('class', _this.imgClass) : {}
imgRow.style.height = tempHeight + 'px'
_this.rowClass ? imgRow.setAttribute('class', _this.rowClass) : {}
if (_this.lightGallery) {
var lg = document.createElement('div')
lg.style.display = 'inline-block'
lg.setAttribute('data-src', img.dom.src)
lg.appendChild(img.dom)
imgRow.appendChild(lg)
} else {
imgRow.appendChild(img.dom)
}
}
_this.container.appendChild(imgRow)
_this.cacheImgRow.push(imgRow)
if (lastOne && _this.lightGallery && lightGallery) {
for (var i = 0; i < _this.container.children.length; i++) {
lightGallery(_this.container.children[i], _this.lightGalleryConf)
}
}
}
function _resize(ctx) {
window.addEventListener('resize',function () {
if (ctx.container.offsetWidth !== ctx.conWidth) {
ctx.conWidth = ctx.container.offsetWidth
ctx.rowArr = []
var containerNodes = ctx.container.childNodes
for (var i = containerNodes.length - 1; i >= 0; i--) {
ctx.container.removeChild(containerNodes[i])
}
for (var i = 0; i < ctx.cacheImg.length; i++) {
_setRow(ctx, ctx.cacheImg[i], i)
}
}
})
}
OCask.prototype = {
getImgs: function (cb) {
var _this = this
if (_this.imgArr.length !== 0) {
var imgLoadRecur = function (imgIndex) {
var imgTemp = new Image()
imgTemp.src = _this.imgArr[imgIndex]
imgTemp.onload = (function (imgTemp) {
imgIndex === _this.imgArr.length - 1 && _this.responsive ? _resize(_this) : {}
return function () {
var scale = imgTemp.width / imgTemp.height
var img = {
dom: imgTemp,
scale: scale,
height: _this.baseHeight,
width: _this.baseHeight * scale
}
_setRow(_this, img, imgIndex)
_this.cacheImg.push(img)
// end of images ?
if (_this.imgArr[imgIndex + 1]) {
imgLoadRecur(imgIndex + 1)
} else {
//callback
typeof cb === 'function' ? cb() : {}
}
}
})(imgTemp)
}
imgLoadRecur(0)
}
}
}
return OCask
})