forked from xudailong/xudailong.github.io
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathwaterfall.js
More file actions
102 lines (96 loc) · 3.22 KB
/
waterfall.js
File metadata and controls
102 lines (96 loc) · 3.22 KB
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
/* jshint asi:true */
//先等图片都加载完成
//再执行布局函数
/**
* 执行主函数
* @param {[type]} function( [description]
* @return {[type]} [description]
*/
(function() {
/**
* 内容JSON
*/
var demoContent = [
{
demo_link: 'https://codepen.io/haoyang/pen/jrvrQq',
img_link: 'https://ooo.0o0.ooo/2016/11/24/5836d81f48cd2.png',
code_link: 'https://codepen.io/haoyang/pen/jrvrQq',
title: 'Fisher-Yates 洗牌算法动画',
core_tech: 'JavaScript',
description: 'Fisher-Yates 洗牌算法动画。算法详情见 <a href ="https://gaohaoyang.github.io/2016/10/16/shuffle-algorithm/">这里</a>。'
},
];
contentInit(demoContent) //内容初始化
waitImgsLoad() //等待图片加载，并执行布局初始化
}());
/**
* 内容初始化
* @return {[type]} [description]
*/
function contentInit(content) {
// var htmlArr = [];
// for (var i = 0; i < content.length; i++) {
// htmlArr.push('<div class="grid-item">')
// htmlArr.push('<a class="a-img" href="'+content[i].demo_link+'">')
// htmlArr.push('<img src="'+content[i].img_link+'">')
// htmlArr.push('</a>')
// htmlArr.push('<h3 class="demo-title">')
// htmlArr.push('<a href="'+content[i].demo_link+'">'+content[i].title+'</a>')
// htmlArr.push('</h3>')
// htmlArr.push('<p>主要技术：'+content[i].core_tech+'</p>')
// htmlArr.push('<p>'+content[i].description)
// htmlArr.push('<a href="'+content[i].code_link+'">源代码 <i class="fa fa-code" aria-hidden="true"></i></a>')
// htmlArr.push('</p>')
// htmlArr.push('</div>')
// }
// var htmlStr = htmlArr.join('')
var htmlStr = ''
for (var i = 0; i < content.length; i++) {
htmlStr += '<div class="grid-item">' + ' <a class="a-img" href="' + content[i].demo_link + '">' + ' <img src="' + content[i].img_link + '">' + ' </a>' + ' <h3 class="demo-title">' + ' <a href="' + content[i].demo_link + '">' + content[i].title + '</a>' + ' </h3>' + ' <p>主要技术：' + content[i].core_tech + '</p>' + ' <p>' + content[i].description + ' <a href="' + content[i].code_link + '">源代码 <i class="fa fa-code" aria-hidden="true"></i></a>' + ' </p>' + '</div>'
}
var grid = document.querySelector('.grid')
grid.insertAdjacentHTML('afterbegin', htmlStr)
}
/**
* 等待图片加载
* @return {[type]} [description]
*/
function waitImgsLoad() {
var imgs = document.querySelectorAll('.grid img')
var totalImgs = imgs.length
var count = 0
//console.log(imgs)
for (var i = 0; i < totalImgs; i++) {
if (imgs[i].complete) {
//console.log('complete');
count++
} else {
imgs[i].onload = function() {
// alert('onload')
count++
//console.log('onload' + count)
if (count == totalImgs) {
//console.log('onload---bbbbbbbb')
initGrid()
}
}
}
}
if (count == totalImgs) {
//console.log('---bbbbbbbb')
initGrid()
}
}
/**
* 初始化栅格布局
* @return {[type]} [description]
*/
function initGrid() {
var msnry = new Masonry('.grid', {
// options
itemSelector: '.grid-item',
columnWidth: 250,
isFitWidth: true,
gutter: 20
})
}