-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
94 lines (88 loc) · 2.21 KB
/
index.html
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
<html>
<body>
<style>
html, body, #list{
margin: 0;
padding: 0;
}
#list{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
a{
position: relative;
overflow: hidden;
height: 100px;
width: 100px;
margin: 3px;
display: flex;
flex-direction: column-reverse;
justify-content: space-around;
align-items: center;
}
a span{
flex-grow: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
a img{
flex-shrink: 0;
width: 60px;
height: 60px;
border-radius: 5px;
border-radius: 5px;
background: #fff;
z-index: 1;
}
</style>
<div id="list"></div>
<script src="//code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="//lokeshdhakar.com/projects/color-thief/js/color-thief.js"></script>
<script>
(function(){
function invert(rgb) {
rgb = Array.prototype.join.call(arguments).match(/(-?[0-9\.]+)/g);
for (var i = 0; i < rgb.length; i++) {
rgb[i] = (i === 3 ? 1 : 255) - rgb[i];
}
return rgb;
}
var colorThief = new ColorThief();
$.ajax('./img_list').then(function(rawSuccessResponse){
rawSuccessResponse
.split('\n')
.filter(function(item){ return !!item; })
.forEach(function(item){
var title = item.split('.').shift();
var src_url = './images/' + item;
var image = new Image();
image.width = 100;
image.src = src_url;
var img = $(document.createElement('img'));
img.attr('src', src_url);
img.attr('alt', title);
var a = $(document.createElement('a'));
var span = $(document.createElement('span'));
span.text(title);
a.append(span, img);
$('#list').append(a);
(function(a) {
image.onload = function () {
var palette = colorThief.getPalette(image);
var color = palette[1];
var cssColor = 'rgb(' + color[0] + ',' + color[1] + ',' + color[2] + ')';
var invertedColor = invert(color);
var cssColor2 = 'rgb(' + invertedColor[0] + ',' + invertedColor[1] + ',' + invertedColor[2] + ')';
a.css('color', cssColor2);
a.css('background', cssColor);
};
})(a);
});
});
})();
</script>
</body>
</html>