新浪微博2017前端筆試題

阿新 • • 發佈：2018-12-22

連結的偽類順序（:link :visited :hover :active）
瀑布流佈局的實現方法

//.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;
}

列出幾種CSS預編譯語言，並舉例其中一種
列舉移動端適配方案，並簡單寫明原理
不借助第三個變數交換兩個整數的值
- a=a-b, b=a+b, a=2b
- a=a^b, b=a^b, a=a^b
- [a,b]=[b,a]
js深拷貝的實現方法

新浪微博2017前端筆試題

連結的偽類順序（:link :visited :hover :active）瀑布流佈局的實現方法 //.html <!DOCTYPE html> <html lang="en"> <head> <me

新浪微博筆試題

這個還是去年校招時候做的筆試題了，一面之後發過來這樣兩道題，回覆之後就被告知通過面試了。雖然自己寫的不專業，但是現在翻出來看看，當時還是寫得比較認真。競品分析、資料分析這種，還是應該每週寫一點鍛鍊鍛鍊。把這個題和我當初的答案貼在這裡，就當給自己一個提醒吧。

1-新浪微博爬蟲-（2017-05-09）

1 爬使用者的資訊 1-1 哪裡找cookies 1-2 哪裡找使用者資訊 2 爬使用者發過的所有部落格 2

2018秋招運維面試題彙總(新浪微博，小米，百度，vipkid等)

小白的運維面試經驗分享：一.百度一面：第一次面試，是電話面試，當時正在睡覺，接到電話趕緊去洗把臉清醒了一下，這次電話面試大概65分鐘吧，問的東西很多很多，基本像網路，資料結構，C，C++，運維相關知識都問到了，感覺還是很有水平的一個面試哈哈哈： 1.做一下自

新浪PHP開發工程師面試筆試題

新浪筆試面試 php面試筆試找實習找的心累，於是在學校bbs上找了一個新浪的散招。先做了一份筆試題，題目如下。1、列舉一下你知道的Unix信號，並說明其用途2、給你一個ip地址，寫出其無符號32位的表示法3、給你一些http的東西post請求，數據，cookie，URL，寫一個http頭。4、簡述一

python 爬蟲1 開始，先拿新浪微博開始

大括號版本 install esp con data- 定位 ble Language 剛剛開始學。目的地是兩個。一個微博，一個貼吧存入的話，臨時還沒想那麽多。先存到本地目錄吧分詞和推薦後面在整合 mysql mongodb hadoop redius 後面在用

[數據集]新浪微博數據集MicroblogPCU

sets learning lun epo con 新浪摘要 get 關系數據集下載地址：下載摘要：MicroblogPCU是從新浪微博採集到的。它能夠被用於研究機器學習方法和社會關系研究。這個數據集被原作者用於探索微博中的spammers（發送垃圾信息的人）。

java parse 帶英文單詞的日期字符串轉 date （轉化新浪微博api返回的時間）

site ats 技術 cnblogs local 隨筆 html5 null 就會拂曉風起專註前端技術cocos2d、js、flash、html5，聯系：[email protected]/* */，請不吝推薦簡歷。博客園首頁

新浪微博分享鏈接代碼

地址 php 微博新浪 ref http href .com targe <a href="http://service.weibo.com/share/share.php?url=分享的網址;title=標題內容&pic=分享的圖片地址" targ

新浪微博基於混合雲的PHP服務化與彈性擴容

服務器新浪微博雲平臺突發事件白百合從後端來講，新浪微博可以分為Java和LNMP兩大體系，特別是在LNMP方面積累了很多經驗。發展初期，新浪微博側重從性能角度出發，做架構方面的調整和優化。近兩年，它投入人力、物力，把重點放在了彈性擴容方面。本文由在新浪微博工作近七年、現任主站研發

apigw鑒權分析（1-4）新浪微博開放平臺 - 鑒權分析

取消 spa 控制 server 信息 des 包含 flash poi 一、訪問入口 http://open.weibo.com/wiki/%E6%8E%88%E6%9D%83%E6%9C%BA%E5%88%B6%E8%AF%B4%E6%98%8E 微博開放接口的

新浪微博share分享接口請求奇葩錯誤

安全配置域名問題如果 sha 實時名稱錯誤限制 17年6月30號，微博正式轉入牛逼狀態；限制原來的微博發布刪除等接口；（想用就開套餐，不然別說話）開放新的分享接口share，然而，在調用這個分享接口時候，就會出現各種各樣的奇葩錯誤；註意事項：

在Android中使App高速、簡單地支持新浪微博、微信、QQ、facebook等十幾個主流社交平臺的分享功能

分析 ont renren androidm mod 執行 xen 12px 操作前言在如今的APP或者遊戲中，分享功能差點兒已經成為標配。分享功能不但能夠滿足用戶的需求。也能夠為產品帶來很多其它的用戶，甚至能夠對用戶的行為、活躍度、年齡段等情況進行數據統計，使得軟

（一一六）新浪微博client的離線緩存實現思路

aso 離線要求北京 ... comm roo rep 功能上一節（一一五）利用NSKeyedArchiver實現隨意對象轉為二進制介紹了將隨意對象轉化為二進制數據和還原的方法。可用於實現本節介紹的微博數據離線緩存。通過新浪官方的API能夠發現，返回的微博

iOS之接入新浪微博 SDK（微信支付）的坑(registerApp 的問題)

com .net symbols object type lan creat manager -o 最近在做一個 iOS 的 cocos2d-x 項目接入新浪微博 SDK 的時候被“坑”了，最後終於順利的解決了。發現網上也有不少人遇到一樣的問題，但是能找到的數量有限的解決辦

實現QQ、微信、新浪微博和百度第三方登錄(Android Studio)

wiki protocol super cli 路徑參考 syn jar包 all 前言：對於大多數的APP都有第三方登錄這個功能，自己也做過幾次，最近又有一個新項目用到了第三方登錄，所以特意總結了一下關於第三方登錄的實現，並拿出來與大家一同分享；各大開放平臺註冊

Android 新浪微博開放平臺應用 android簽名怎麽獲得

文件簽名 jdk cnblogs androi *** 命令 user pan 方法一：　　通過命令行，直接生成MD5值　　keytool -list -v -keystore keystorefile -storepass 123456 　　其中ke

Python爬蟲開源項目代碼，爬取微信、淘寶、豆瓣、知乎、新浪微博、QQ、去哪網等代碼整理

http server 以及 pro 模擬登錄取數存在漏洞搜狗作者：SFLYQ 今天為大家整理了32個Python爬蟲項目。整理的原因是，爬蟲入門簡單快速，也非常適合新入門的小夥伴培養信心。所有鏈接指向GitHub，祝大家玩的愉快~ 1、WechatSogou

頂部通欄-新浪微博效果

ntb var fun on() wid 新浪微博 off tex function JS---------------------------------------- window.onload=function() {

全程模擬新浪微博登錄（2015）

star php utf 版本 get lag spa ckey phoenix 非常久之前就了解過模擬登錄的過程。近期對python用的比較多，想來練練手，就想實現

新浪微博2017前端筆試題

相關推薦