1 js相關(guān)概念
學(xué)習(xí)提示
到了 JavaScript，學(xué)習(xí)難度會(huì)慢慢增加，永遠(yuǎn)記得：戒驕戒躁着绊、踏實(shí)前行。學(xué) JS 的過(guò)程中需要多動(dòng)手眶诈、多思考、多整理，慢慢準(zhǔn)備自己的小項(xiàng)目、大項(xiàng)目倒庵。學(xué)習(xí)資源
知乎前端學(xué)習(xí)指南, 這里匯聚了老師們寫的原創(chuàng)文章，兩三天看一篇絕對(duì)受益匪淺
GitHub筆試面試題集錦炫刷， 這里是收集的優(yōu)質(zhì)筆試面試題哄芜，可以作為學(xué)習(xí)成果的檢驗(yàn)
饑人谷課件, 可以作為學(xué)習(xí)的教材
課堂內(nèi)外一些前端小項(xiàng)目
饑人谷 api，老師實(shí)現(xiàn)的一些 api 接口柬唯，便于大家做一些個(gè)人創(chuàng)意小項(xiàng)目
饑人谷作品庫(kù), 饑人谷作品庫(kù)，里面收集一些大家的作品圃庭，可以作為大家作品準(zhǔn)備的參考
GitHub簡(jiǎn)歷模板, 老師收集的一些簡(jiǎn)歷模板锄奢，大家在寫簡(jiǎn)歷的時(shí)候可以參考谷外優(yōu)質(zhì)資源
阮一峰Javascript教程, 系統(tǒng)權(quán)威的 JS 教程，可以作為學(xué)習(xí)的輔助教材
湯姆大叔的 javascript 翻譯系列剧腻， 湯姆大叔翻譯的一些優(yōu)質(zhì)文章拘央，難度頗高，大家可以在學(xué)完進(jìn)階課程后再看
2 事件
- 學(xué)習(xí)提示
如果覺(jué)得實(shí)現(xiàn)起來(lái)有困難书在，可以參考代碼提示灰伟，一定要自己手寫一遍
可參考：饑人谷課件-event事件
題目5參考
題目6參考
題目7參考
3 事件的應(yīng)用
-
題目1： 實(shí)現(xiàn)如下圖Tab切換的功能
-
題目2：實(shí)現(xiàn)下圖的模態(tài)框功能，點(diǎn)擊模態(tài)框不隱藏儒旬，點(diǎn)擊關(guān)閉以及模態(tài)框以外的區(qū)域模態(tài)框隱藏
學(xué)習(xí)提示
題目1參考答案
題目2參考答案栏账；參考答案里 CSS 里用了 LESS 的語(yǔ)法，有興趣的同學(xué)可參考LESS
4 瀑布流實(shí)現(xiàn)
<!doctype html>
<html lang="zh-Hans"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title>
<style>
* { margin: 0; padding: 0;
}
#container { display: flex; justify-content: center;
}
#container > #col1, #container > #col2, #container > #col3 {
width: 250px;
min-height: 100px;
margin: 0 10px;
overflow: hidden;
}
#container img {
max-width: 100%;
vertical-align: top;
margin-bottom: 10px;
}
</style>
</head>
<body>
<!doctype html>
<html lang="zh-Hans">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* { margin: 0; padding: 0; }
#container {
display: flex;
justify-content: center;
}
#container > #col1,
#container > #col2,
#container > #col3 {
width: 250px;
min-height: 100px;
margin: 0 10px;
overflow: hidden;
}
#container img {
max-width: 100%;
vertical-align: top;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div id="container">
<div id="col1"></div>
<div id="col2"></div>
<div id="col3"></div>
</div>
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script>
let $container = $('#container')
let columns = [$('#col1'), $('#col2'), $('#col3')]
let totalHeights = [0, 0, 0]
let currentPage = 1
getOnePage(1, function () {
getOnePage(2, function () {
currentPage = 2
})
})
$(window).scroll(function () {
if (isBottom()) {
getOnePage(currentPage + 1, function(){
currentPage += 1
})
} else {
console.log('繼續(xù)滾')
}
})
function isBottom () {
return $(window).scrollTop() + $(window).height() == $(document).height()
}
function getOnePage (page, success) {
let number = 0
let images = []
getNews(6, page).then(function (response) {
let data = response.data
data.forEach((item, index) => {
let img = new Image()
images.push(img)
img.onload = function () {
number += 1
if (number === 6) {
for (let i = 0; i < images.length; i++) {
let shortestColumnIndex = findIndexOfShortestColumn()
$(`#col${shortestColumnIndex + 1}`).append(images[i])
totalHeights[shortestColumnIndex] += images[i].height + 10
}
success && success()
}
}
img.src = randomImage()
})
})
}
function findIndexOfShortestColumn () {
let minIndex = 0
for (let i = 0; i < totalHeights.length; i++) {
if (totalHeights[i] < totalHeights[minIndex]) {
minIndex = i
}
}
return minIndex
}
// 生成隨機(jī)圖片
function randomImage () {
let height = parseInt(Math.random() * 200 + 100, 10) // 100~300
return `http://lorempixel.com/250/${height}/sports/Dummy-Text/`
}
// 不要看了
// 獲取新聞
function getNews (number, page) {
page = page || 1 // 保底
number = number || 8
let url = `http://platform.sina.com.cn/slide/album_tech` +
`?app_key=1271687855&num=${number}&page=${page}`
return $.ajax({
url: url,
dataType: 'jsonp',
jsonp: 'jsoncallback'
})
}
</script>
</body>
</html>
5其他JS Bin代碼匯總：
1
我的第一個(gè)頁(yè)面
導(dǎo)航欄
作品
2
輸入框
新聞加載
github在線簡(jiǎn)歷編輯1
github在線簡(jiǎn)歷編輯2
面試題匯總
筆試題分享
饑人谷前端作品庫(kù)
