1. 程式人生 > >新浪微博2017前端筆試題

新浪微博2017前端筆試題

  1. 連結的偽類順序(:link :visited :hover :active)
  2. 瀑布流佈局的實現方法
//.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>瀑布流首頁</title>
    <link href="css/index.css" rel="stylesheet">
</head>
<body>
    <!--父盒子-->
    <div id="main"
> <!--單個盒子--> <div class="box"> <!--圖片盒子--> <div class="pic"> ![](images/1.jpg) </div> </div> <!--單個盒子標籤複製20次...圖片名字改改...--> </div> <!--引入JS,CSS方式註釋掉--> <script src="js/index.js"
type="text/javascript"></script> </body> </html> //.css *{ /*去除邊距*/ margin:0; padding: 0; /*html效能優化:虛擬dom,如果一個html標籤沒有設定css樣式,就是虛擬的, 所以無論設定多少層div都對效能沒有影響*/ } #main{ /*定位*/ position: relative; } .box{ /*內邊距*/ padding:15px 0 0 15px ; float: left; } .pic{ /*邊框*/
border:1px solid #dddddd; } .pic img{ width: 165px; } //.js function $(id) { //判斷id的型別 return typeof id === 'string'?document.getElementById(id):id; } //當網頁載入完畢 window.onload = function () { //瀑布流佈局 保證傳的引數能夠找到父盒子 waterFall('main','box'); //滾動載入盒子 window.onscroll = function () { //判斷是否載入 if (checkWillLoad()) { //創造假資料 var data = {'dataImg':[{'img':'23.jpg'},{'img':'24.jpg'},{'img':'25.jpg'},{'img':'26.jpg'},{'img':'27.jpg'},{'img':'28.jpg'}]}; //載入資料 for(var i=0; i<data.dataImg.length; i++) { //建立最外面的盒子 var newBox = document.createElement('div'); newBox.className = 'box'; $('main').appendChild(newBox); //建立單個盒子 var newPic = document.createElement('div'); newPic.className = 'pic'; newBox.appendChild(newPic); //建立img var newImg = document.createElement('img'); newImg.src = 'images/' + data.dataImg[i].img; newPic.appendChild(newImg); } //把剛建立的盒子瀑布流佈局 waterFall('main','box'); } } } //實現瀑布流佈局 //規則:從第二行開始的圖片,總是拼接在上一行高度最矮的圖片後面 function waterFall(parent,box) { //父盒子居中 //通過父盒子拿到所有的子盒子 var allBox = $(parent).getElementsByClassName(box); //求出盒子的寬度 var boxWidth = allBox[0].offsetWidth; //求出瀏覽器的寬度(包括邊框的寬高) var screenWidtn = document.body.offsetWidth; //求出列數 //取整函式取整 var cols = Math.floor( screenWidtn/boxWidth); //父標籤居中 //先求出父標籤寬度 $(parent).style.width = boxWidth * cols + 'px'; //居中 $(parent).style.margin = '0 auto'; //子盒子定位 //建立一個高度陣列,存所有的高度 var heightArr = []; //遍歷 for(var i = 0; i < allBox.length ;i++) { //求出每個盒子的高度 var boxHeight = allBox[i].offsetHeight; //第一行的盒子不需要重新定位//每一行的盒子數與列數相同 if(i<cols) { //新增第一行所有盒子高度 heightArr.push(boxHeight); } else//剩下的盒子都需要瀑布流佈局 { //求出最矮的盒子高度 var minBoxHeight = Math.min.apply(this,heightArr); //求出最矮盒子對應的索引 var minBoxIndex = getMinBoxIndex(minBoxHeight,heightArr); //盒子瀑布流定位 頂部間距就是最矮盒子的高度 allBox[i].style.position = 'absolute'; allBox[i].style.top = minBoxHeight + 'px'; allBox[i].style.left = minBoxIndex * boxWidth +'px'; //關鍵:更新陣列最矮高度,使下一個圖片在高度陣列中總是找最矮高度的圖片下面拼接 heightArr[minBoxIndex] += boxHeight; } } } //求出最矮盒子對應的索引函式 function getMinBoxIndex(val,arr) { for(var i in arr) { if(val == arr[i]) { return i; } } } //載入更多規則:當瀏覽器最下方到達圖片的高度一半時讓其刷新出來 //判斷是否符合載入條件 function checkWillLoad() { //取出所有盒子 var allBox = $('main').getElementsByClassName('box'); //取出最後一個盒子 var lastBox = allBox[allBox.length - 1]; //求出最後一個盒子高度的一半 + 內容與瀏覽器頭部的偏離位置 var lastBoxDis = lastBox.offsetHeight * 0.5 + lastBox.offsetTop; //求出瀏覽器的高度 // 注意:JS程式碼存在瀏覽器相容問題 一般分標準模式(按螢幕算document.body.offsetHeight)和混雜模式(按所有內容算) var screenHeight = document.documentElement.clientHeight; //頁面偏離螢幕的高度 var scrollTopHeight = document.body.scrollTop; //判斷 return lastBoxDis <= screenHeight + scrollTopHeight; }
  1. 列出幾種CSS預編譯語言,並舉例其中一種
  2. 列舉移動端適配方案,並簡單寫明原理
  3. 不借助第三個變數交換兩個整數的值
    • a=a-b, b=a+b, a=2b
    • a=a^b, b=a^b, a=a^b
    • [a,b]=[b,a]
  4. js深拷貝的實現方法