Javascript(2)-js進階

1.JavaScript核心操作——DOM對象

  • window對象
通過window對象，可以操作和瀏覽器軟件相關的信息
        // window.alert();//調用瀏覽器的對話框操作

        // history對象：項目中幾乎不用
        //window.history.back();//后退操作,返回上一個訪問歷史
        //window.history.forward();//前進操作京革，訪問下一個訪問歷史
        //window.history.go(2);//跳轉到某一個訪問歷史

        // location對象：項目中的url操作
        /*console.log(location);
        console.log(location.href);// 獲取當前網頁的url地址
        console.log(location.protocol);//獲取當前訪問協議
        console.log(location.host);// 獲取訪問網頁的主機地址
        console.log(location.hostname);
        console.log(location.post);// 訪問端口*/


        // JS代碼控制頁面的指向
        /*setTimeout(function() {
            location.
        }, 2000)*/

        /*setTimeout(function() {
            location.reload()// 刷新網頁
        }, 5000)*/


        // screen對象
        // screen表示電腦屏幕的意思
        // screen.width/height表示的是電腦屏幕的寬度和高度分辨率
        // screen.availWidth/screen.availHeight:屏幕的寬度和高度【不包含任務欄】
        // console.log(screen.width, screen.height);
        // console.log(screen.availWidth, screen.availHeight);

        // navigator對象：瀏覽器軟件的信息
  • screen對象
  • history對象
  • location對象
  • navigator對象
  • document對象
  • window事件操作
  • onload頁面數據加載事件
  • onscroll頁面滾動條事件
  • 兼容問題：獲取滾動條卷去網頁高度

2.DOM基礎API操作

  • 獲取標簽DOM對象

直接通過id屬性值使用DOM對象
通過id屬性值獲裙沤А：document.getElementById()
通過標簽名稱獲绕睢：document.getElementsByTagName()
通過class屬性值獲忍汛堋：document.getElementsByClassName()
通過name屬性值獲认胨А：document.getElementsByName()
混合獲取，通常是id模式和tagName模式混合獲取

代碼操作

        // 直接通過標簽的id屬性，得到標簽對象【 不推薦】
        console.log(box);
        box.innerText = "可以通過標簽的id屬性直接使用標簽"

        // 通過getElemnetById("id")函數局骤，來通過id屬性值獲取標簽，【推薦】
        var _box = document.getElementById("box2");
        _box.innerText = "通過ElementById()函數獲取標簽對象暴凑，進行操作"

        // 通過標簽名稱峦甩，可以獲取到一組標簽
        var _boxes = document.getElementsByTagName("div");
        console.log(_boxes);
        _boxes[2].innerText = "這是通過getElementsByTagName()獲取的元素"

        // 通過標簽的name屬性，也可以獲取到一組標簽
        var _jerry = document.getElementsByName("jerry");
        console.log(_jerry);
        _jerry.innerText = "通過name屬性獲取標簽"


        // 通過標簽的class屬性獲取標簽：IE8.0+
        var _container = document.getElementsByClassName("container");
        console.log(_container);
        _container[0].innerText = "這個是通過class屬性獲取到的標簽對象"

操作標簽的DOM對象屬性

  • 標準函數操作

獲取屬性值：var x = getAttribute(name)
設置屬性值：setAttribute(name, value)
移除屬性：removeAttribute(name);

  • 方括號操作

獲取屬性值：var x = dom[“name”];
設置屬性值：dom[“name”]=value;

  • 連接符.操作

獲取屬性值：var x = dom.name;
設置屬性值：dom.name = value;
備注：dom表示dom對象现喳，name表示屬性名稱凯傲，value表示屬性值
操作標簽的DOM對象樣式

  • 獲取DOM對象樣式

var x = document.currentStyle[name];兼容IE低版本的獲取樣式的方式
var x = getComputedStyle(dom)[name];獲取樣式存在兼容性問題【兼容IE9+ 和其他瀏覽器】
Window.getComputedStyle() 方法給出應用活動樣式表后的元素的所有CSS屬性的值，并解析這些值可能包含的任何基本計算嗦篱。


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>JS代碼操作標簽的樣式</title>
    
    <style>
        #box{height: 200px;background:red;}
    </style>
</head>
<body>
    <div id="box" style="width:100px;"></div>
    <script>
    /*操作標簽的樣式*/
    /*增刪改查*/
    /*獲取樣式冰单、設置樣式*/
    var _box = document.getElementById("box");

    /**************************************************/
    // 獲取樣式：有兩種方式
    // 1. 獲取樣式的值  100px
    // 2. 獲取樣式的數值  100

    // 獲取標簽對象的樣式【標簽內嵌、頁面內嵌灸促、外部樣式 都可以獲取到】
    // 獲取樣式存在兼容性問題【兼容IE9+ 和其他瀏覽器】
    var _h = window.getComputedStyle(_box).height;
    var _w = window.getComputedStyle(_box).width;
    console.log(_w, _h);
    // 兼容IE低版本的獲取樣式的方式【我們只需要了解即可】
    // var _h1 = _box.currentStyle.height;
    // var _w1 = _box.currentStyle.width;
    // 獲取樣式的數值
    var _wvalue = _box.offsetWidth;
    var _hvalue = _box.offsetHeight;
    console.log(_wvalue, _hvalue);
    /**************設置樣式************************************/
    // 標簽對象.style.樣式名稱  使用這樣的語法诫欠，是用來操作標簽內嵌樣式的！
    // 給標簽設置樣式浴栽，統一使用 標簽對象.style.樣式名稱 = 樣式值;
    _box.style.width = "300px";
    </script>
</body>
</html>
控制臺輸出結果
  • 設置DOM對象樣式

直接通過style進行行內樣式設置荒叼。
dom.style.樣式名稱 = 樣式值;
樣式名稱可能是多個單詞組成的 background-color，在JS中進行操作的時候需要將名稱轉換成駝峰命名法：backgroundColor
注意：盡量不要在JS中進行大量樣式的設置吃度。

  • 對于標簽內容的操作甩挫，有三種方式
  1. innerText：給指定標簽的開始標簽和結束標簽中增加文本內容【非W3C標準】
  1. textContent：dom操作贴硫，給標簽的開始標簽和結束標簽中增加文本內容椿每，W3C標準操作
  2. innerHTML：給標簽的開始標簽和結束標簽中伊者，增加一段HTML代碼；慎重使用间护，容易造成代碼注入漏洞亦渗！
    擴展：所謂代碼注入漏洞，是用于可以在客戶端通過輸入包含代碼的字符串的方式汁尺，將帶入注入到我們的網頁中進行執(zhí)行的過程
    innerHTML的使用規(guī)則
    對于數據的來源法精，完全信任的情況下使用它。其他時候禁止使用痴突！

代碼操作：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>JS操作標簽屬性</title>
    
</head>
<body>
    <!-- value是input標簽的屬性 -->
    輸入年齡：<input type="text" id="uname" value="100">

    <script>
        
        var _name = document.getElementById("uname");
        // 1. 直接通過 [標簽對象.屬性]來操作標簽的屬性值
        _name.value = "120";
        _name.id = "age";
        console.log(_name.value, _name.id);
    
        // 2. 通過 標簽對象.["屬性名稱"] 來操作標簽的屬性值
        _name["value"] = 110;
        _name["id"] = "phone";
        console.log(_name["value"], _name["id"]);

        
        // 3. DOM操作方式搂蜓，通過getAttribute("屬性名稱")獲取標簽的屬性值
        _name.setAttribute("value", 119);
        _name.setAttribute("id", "sex");
        // _name.className = "sex";
        _name.removeAttribute("value");
        console.log(_name.getAttribute("value"), _name.getAttribute("id"));

    </script>
</body>
</html>

備注：在使用原生JS操作標簽的屬性時，規(guī)則如下

  • id屬性辽装、title屬性帮碰，建議通過 標簽對象.屬性名稱 的語法進行處理。
  • class屬性拾积，建議通過標簽對象.className 的語法進行處理殉挽。
  • 其他屬性，建議使用set/getAttribute()的語法進行處理拓巧。

刪除value屬性斯碌。。肛度。傻唾。：這樣的語法是不能刪除屬性的
_name.value = null;

3.DOM核心API操作

節(jié)點屬性API——獲取元素定位

  • 元素的尺寸(寬度、高度)承耿、位置(top.left)
屬性/函數名稱 描述
offsetWidth 獲取元素寬度策吠；包含padding值\border值
offsetHeight 獲取元素高度；包含padding值\border值
offsetTop 獲取元素距離瀏覽器頂部的距離
offsetLeft 獲取元素距離瀏覽器左邊的距離

備注：如果父元素進行了relative/absolute定位瘩绒，offsetTop/offsetLeft就是相對父元素的頂部和左邊的距離猴抹，如果父元素默認定位，就是相對瀏覽器窗口的距離

備注：獲取網頁可視區(qū)域寬度锁荔，高度
var clientWidth = 
window.innerWidth||document.documentElement.clientWidth;
var clientHeight = 
      window.innerHeight||document.documentElement.clientHeight;

獲取網頁文檔的寬度蟀给、高度
var bodyWidth = document.body.clientWidth;
var bodyHeight = document.body.clientHeight;

實例：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #container{
            position:static;// relative
            width:800px;
            height:400px;
            margin-left:100px;
            margin-top:100px;
            background-color: #069;
            padding:1px;
        }
        #box{
            padding:50px;
            width:100px;
            height:100px;
            /*position:absolute;
            top:50px;
            left:50px;
            margin:50px 0 0 50px;
            background-color: #fff;
        }
    </style>
</head>
<body>
<div id="container">
    <div id="box"></div>
</div>
<script>
    function getStyle(dom, styleName) {
        if(dom.currentStyle) {
            return dom.currentStyle[styleName];
        } else {
            return getComputedStyle(dom)[styleName];
        }
    }

    var box = document.getElementById("box");
    console.log(getStyle(box,"width") + "---" + box.offsetWidth);
    console.log(getStyle(box, "height") + "---" + box.offsetHeight);
    console.log(getStyle(box, "margin-left") + "---" + box.offsetLeft);
    console.log(getStyle(box, "margin-top") + "---" + box.offsetTop);
    // 獲取網頁可視區(qū)域高度、寬度
console.log(window.innerHeight + "--" + window.innerWidth);
console.log(document.documentElement.clientHeight + "--" + document.documentElement.clientWidth);
// 獲取網頁文檔的高度阳堕、寬度
console.log(document.body.clientHeight + "--" + document.body.clientWidth);

</script>
</body>
  • 節(jié)點查詢API
屬性/函數名稱 描述
hasChildNodes() 判斷是否包含子節(jié)點跋理，返回一個布爾值
children 獲取元素所有的子元素節(jié)點集合/數組
childNodes 獲取元素所有的子節(jié)點集合/數組
firstChild 獲取元素第一個子節(jié)點
firstElementChild 獲取元素第一個子元素節(jié)點
lastChild 獲取元素最后一個子節(jié)點
lastElementChild 獲取元素最后一個子元素節(jié)點
previousSibling 獲取元素前一個兄弟節(jié)點
previousElementSibling 獲取元素前一個兄弟元素節(jié)點
nextSibling 獲取元素后一個兄弟節(jié)點
nextElementSibling 獲取元素后一個兄弟元素節(jié)點
parentNode 獲取元素的父節(jié)點
textContent 操作(獲取/設置)元素內容
  • 節(jié)點創(chuàng)建/添加API
屬性/函數名稱 描述
createElement(tagName) 根據名稱創(chuàng)建一個元素節(jié)點
createTextNode(text) 根據文本創(chuàng)建一個文本節(jié)點
insertBefore(new,old) 在指定的節(jié)點前面添加節(jié)點
appendChild(child) 在子節(jié)點的末尾追加節(jié)點
replaceChild(new,old) 使用新的節(jié)點替換指定的節(jié)點
removeChild(child) 移除指定的子節(jié)點
className 設置標簽class屬性樣式值

代碼操作

<body>
    <div id="container">
        <div id="box">
            原有標簽
        </div>
    </div>
    <script>
        var container = document.getElementById("container");
        var box = document.getElementById("box");
        // 創(chuàng)建第一個元素節(jié)點
        var d = document.createElement("div");
        // 創(chuàng)建文本節(jié)點
        var t = document.createTextNode("這是div文本");

        // 創(chuàng)建第二個元素節(jié)點
        var d2 = document.createElement("p");
        var t2 = document.createTextNode("這是p文本");

        // 添加元素節(jié)點到指定節(jié)點中
        d.appendChild(t);
        // 追加節(jié)點到指定節(jié)點前面
        container.insertBefore(d, box);

        // 追加節(jié)點到子節(jié)點末尾
        d2.appendChild(t2);
        d2.className = "test";
        container.appendChild(d2);
    </script>
</body>

4.簡單特效開發(fā)

  • 抽獎
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>抽獎</title>
    <style type="text/css">
        *{margin: 0px;padding: 0px;}
        .container{
            width: 500px;height: 600px;background: white;border:solid 2px orange;margin: auto;border-radius: 10px;}
        .box,.show,.show_active{width: 450px;height: 450px;border-radius: 50%;}
        .box{border:2px orange solid;padding: 10px;margin: 10px auto;}
        .show{background-color: pink;font-size: 70px;line-height: 450px;text-align: center;}
        .show_active{background-color: #D0D0D0;color:#fff;font-size: 70px;line-height: 450px;text-align: center;}
        #btn{width: 200px;height: 40px;background-color:pink;display: block;margin: auto;font-size: 20px;}
        
    </style>
</head>
<body>
    <div class="container">
        <div class="box">
            <div id="show" class="show">
                等待抽獎
                </div>
        </div>
        <button id="btn" onclick="playGame()">開始抽獎</button>
    </div>

    <script type="text/javascript">
        var _names=["iphone7 plus","iPad Pro","apple watch","iPad mini4","iphone6","apple"]
        //獲取頁面中要使用的標簽對象
        var _btn=document.getElementById("btn");
        var _show=document.getElementById("show");
        var _timer;
        var _flag=false;

        function playGame(){
            if (!_flag){
                _flag=true;
                _timer=setInterval(function(){
                    // 獲取隨機下標
                    var _no=Math.floor(Math.random(_names)*_names.length);
                    // 獲取中獎禮品
                    var _n=_names[_no];
                    // 展示中獎禮品
                    _show.textContent=_n;
                    // 修改按鈕的文本
                    _btn.textContent="停止抽獎";
                    // 修改展示的樣式
                    _show.className="show_active"   
                },50);
            }else{
                _flag=false;
                clearInterval(_timer);
                // 修改按鈕的文本
                _btn.textContent  = "開始抽獎";
                // 修改展示的樣式
                _show.className = "show";
            }
        }


    </script>
</body>
</html>

效果展示：

抽獎
  • 飛機飛行進度演示
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>飛機飛行進度演示</title>
    <style type="text/css">
        *{margin: 0px;padding: 0px;}
        #nav{position: relative;
            height: 128px;
            width: 1200px;
            border:solid 1px #8E8E8E; 
        }
        #nav img{
            position: absolute;
            left: 0px;
            top:0px;
        }

        #process{
            height: 128px;
            background:#FFA042;
            width: 0px;
        }
    </style>
</head>
<body>
    <div id="nav">
        <div id="process"></div>
        ![](images/flystart.png)
    </div>
    <button onclick="start()">開始飛行</button>
    <script type="text/javascript">
        // 獲取小飛機圖片
        var _plane=document.getElementById("plane");
        var _process=document.getElementById("process");
        // 定義一個變量，用來存放計時器
        var _timer;

        // start()函數
        function start(){
            _timer=setInterval(function(){
                // 獲取left的樣式數值
                var _left=_plane.offsetLeft;
                var _width=_process.offsetWidth;
                // 飛行過程left的值增加
                _left+=10;
                _width+=10;

                // 設置隨著飛機的飛行 飛機的圖片發(fā)生改變
                if (_left>200 && _left<800) {
                    _plane.setAttribute("src","images/flying.png");
                    _process.style.background="#6FB7B7";

                }else if(_left>800){
                    _plane.setAttribute("src","images/flyend.png");
                    _process.style.background="#02DFB2"
                }

                // 邊界的判斷
                if (_left>=1200){
                    // 停止計時函數
                    clearInterval(_timer);
                }

                // 設置樣式
                _plane.style.left=_left+"px";
                _process.style.width=_width+"px";

            },100)
        }

    </script>

</body>
</html>

效果展示：

飛機飛行進度演示

5.JavaScript事件——Event

事件操作：
事件就是一種發(fā)生在網頁上的行為恬总；鼠標單擊前普、鼠標雙擊、鍵盤按下壹堰、鍵盤抬起拭卿、獲得焦點骡湖、失去焦點等等各種行為
常見的事件：

  • 鼠標事件
屬性/函數名稱 描述
onmouseout 鼠標離開
onmouseenter 鼠標進入
onabort 圖像的加載被中斷。
onblur 元素失去焦點峻厚。
onchange 域的內容被改變响蕴。
onclick 當用戶點擊某個對象時調用的事件句柄。
ondblclick 當用戶雙擊某個對象時調用的事件句柄惠桃。
onerror 在加載文檔或圖像時發(fā)生錯誤浦夷。
onfocus 元素獲得焦點。
onkeydown 某個鍵盤按鍵被按下辜王。
onkeypress 某個鍵盤按鍵被按下并松開劈狐。
onkeyup 某個鍵盤按鍵被松開。
onload 一張頁面或一幅圖像完成加載呐馆。
onmousedown 鼠標按鈕被按下懈息。
onmousemove 鼠標被移動。
onmouseout 鼠標從某元素移開摹恰。
onmouseover 鼠標移到某元素之上辫继。
onmouseup 鼠標按鍵被松開。
onreset 重置按鈕被點擊俗慈。
onresize 窗口或框架被重新調整大小姑宽。
onselect 文本被選中。
onsubmit 確認按鈕被點擊闺阱。
onunload 用戶退出頁面炮车。
  • 鍵盤事件
屬性/函數名稱 描述
altKey 返回當事件被觸發(fā)時，"ALT" 是否被按下酣溃。
button 返回當事件被觸發(fā)時瘦穆，哪個鼠標按鈕被點擊。
clientX 返回當事件被觸發(fā)時赊豌，鼠標指針的水平坐標扛或。
clientY 返回當事件被觸發(fā)時，鼠標指針的垂直坐標碘饼。
ctrlKey 返回當事件被觸發(fā)時熙兔，"CTRL" 鍵是否被按下。
metaKey 返回當事件被觸發(fā)時艾恼，"meta" 鍵是否被按下住涉。
relatedTarget 返回與事件的目標節(jié)點相關的節(jié)點。
screenX 返回當某個事件被觸發(fā)時钠绍，鼠標指針的水平坐標舆声。
screenY 返回當某個事件被觸發(fā)時，鼠標指針的垂直坐標柳爽。
shiftKey 返回當事件被觸發(fā)時媳握，"SHIFT" 鍵是否被按下碱屁。

焦點事件：常用于表單元素標簽

onfocus 獲取焦點事件【獲得光標事件】
onblue 失去焦點事件
onchange 內容修改事件，

事件的綁定方式：
1.標簽屬性綁定
2.dom元素綁定

  • 鼠標拖拽功能
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>鼠標拖動</title>
    <style type="text/css">
        #box{
            position:absolute;
            width: 336px;
            height: 300px;
            background-image:url("images/mv33.jpg"); }

    </style>
</head>
<body>
    <div id="box">
        
    </div>
    <script type="text/javascript">
        var _box=document.getElementById("box");

        // event事件對象毙芜，可以通過事件對象，獲取到鼠標的位置
        _box.onmousedown=function(event){
            var _clientX = event.clientX;
            var _clientY = event.clientY;

            var _boxl = _box.offsetLeft;
            var _boxt = _box.offsetTop;

            var _left = _clientX - _boxl;
            var _boxt = _clientY - _boxt;

            document.onmousemove = function(event){
                var _clientX1 = event.clientX;
                var _clientY1 = event.clientY;

                var _l = _clientX1 - _left;
                var _t = _clientY1 - _boxt;

                _box.style.left = _l + "px";
                _box.style.top = _t + "px"
            }

            document.onmouseup=function(event){
                document.onmousemove=null;
            }
        }
    </script>
</body>
</html>

效果展示：

鼠標拖拽

擴展

  • 瀑布流式布局
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <style>
    *{margin:0px;padding:0px;}
    #container{width: 1200px;margin:auto;position:relative;}
    .box{padding:5px;float:left;position:absolute;left:0;top:0;}
    .item{padding:5px;border:solid 1px #888;width:190px;border-radius:5px;}
    .item > img{border:none;width:190px;border-radius:5px;vertical-align:bottom;}
    </style>
</head>
<body>
    <div id="container">
        <div class="box">
            <div class="item">![](image/1.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/2.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/3.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/4.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/5.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/6.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/7.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/8.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/9.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/10.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/11.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/12.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/13.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/14.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/15.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/16.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/17.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/18.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/19.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/20.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/21.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/22.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/23.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/24.png)</div>
        </div>
        <div class="box">
            <div class="item">![](image/25.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/26.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/27.png)</div>
        </div>
        <div class="box">
            <div class="item">![](image/28.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/29.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/30.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/31.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/32.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/33.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/34.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/35.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/36.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/37.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/38.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/39.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/40.jpg)</div>
        </div>
    </div>

    <script>
        // 網頁中的標簽和圖片加載
        // 等待網頁中的所有數據加載完成争拐，再執(zhí)行代碼
        // window.onload 頁面數據加載事件

        window.onload = function() {
            var _container = document.getElementById("container");

            // 獲取所有的圖片
            var _imgs = document.getElementsByClassName("box");

            // 計算一行可以存放多少張圖片
            var _containerWidth = _container.offsetWidth;
            var _imgWidth = _imgs[0].offsetWidth;
            var _cols = Math.floor(_containerWidth / _imgWidth);

            // 聲明一個記錄高度的數組
            var _height = [];

            // 遍歷所有的圖片腋粥，開始定位
            for(var i = 0; i < _imgs.length; i++) {
                if(i < _cols) {
                    // 保存第一行中每一張圖片的高度
                    _height.push(_imgs[i].offsetHeight);
                    _imgs[i].style.left = _imgWidth * i + "px";
                } else {
                    // 計算數組中的最小值
                    var _minHeight = Math.min.apply(null, _height);
                    console.log(_minHeight);

                    var _minIndex = getMinIndex(_minHeight, _height);
                    console.log(_minIndex);

                    // i 指的是循環(huán)到else的 i與function getMinIndex函數返回值 i不是一個值
                    _imgs[i].style.top = _minHeight + "px"；
                    _imgs[i].style.left = _minIndex * _imgWidth + "px";

                    // 更新最小高度
                    _height[_minIndex] += _imgs[i].offsetHeight;
                }
            }
        }
        /*value是最小值架曹， arr是這個值所在的數組*/
        function getMinIndex(value , arr){
            for(var i = 0; i < arr.length; i ++) {
                if(value == arr[i]){
                    return i;
                }
            }
        }
    </script>
</body>
</html>

效果展示：

瀑布流式布局
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
  • 人面猴
    序言：七十年代末隘冲，一起剝皮案震驚了整個濱河市，隨后出現的幾起案子绑雄，更是在濱河造成了極大的恐慌展辞，老刑警劉巖，帶你破解...
    沈念sama閱讀 206,482評論 6贊 481
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件万牺，死亡現場離奇詭異罗珍，居然都是意外死亡，警方通過查閱死者的電腦和手機脚粟，發(fā)現死者居然都...
    沈念sama閱讀 88,377評論 2贊 382
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門覆旱，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人核无，你說我怎么就攤上這事扣唱。” “怎么了团南？”我有些...
    開封第一講書人閱讀 152,762評論 0贊 342
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵噪沙，是天一觀的道長。 經常有香客問我吐根，道長正歼，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 55,273評論 1贊 279
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任拷橘，我火速辦了婚禮朋腋，結果婚禮上，老公的妹妹穿的比我還像新娘膜楷。我一直安慰自己旭咽，他們只是感情好，可當我...
    茶點故事閱讀 64,289評論 5贊 373
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布赌厅。 她就那樣靜靜地躺著穷绵，像睡著了一般。 火紅的嫁衣襯著肌膚如雪特愿。 梳的紋絲不亂的頭發(fā)上仲墨，一...
    開封第一講書人閱讀 49,046評論 1贊 285
  • 城市分裂傳說
    那天勾缭，我揣著相機與錄音，去河邊找鬼目养。 笑死俩由，一個胖子當著我的面吹牛，可吹牛的內容都是我干的癌蚁。 我是一名探鬼主播幻梯，決...
    沈念sama閱讀 38,351評論 3贊 400
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼努释！你這毒婦竟也來了碘梢？” 一聲冷哼從身側響起，我...
    開封第一講書人閱讀 36,988評論 0贊 259
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤伐蒂，失蹤者是張志新（化名）和其女友劉穎煞躬，沒想到半個月后，有當地人在樹林里發(fā)現了一具尸體逸邦，經...
    沈念sama閱讀 43,476評論 1贊 300
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡恩沛，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 35,948評論 2贊 324
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時候發(fā)現自己被綠了缕减。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片复唤。...
    茶點故事閱讀 38,064評論 1贊 333
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖烛卧，靈堂內的尸體忽然破棺而出佛纫，到底是詐尸還是另有隱情，我是刑警寧澤总放，帶...
    沈念sama閱讀 33,712評論 4贊 323
  • ?日本核電站爆炸內幕
    正文 年R本政府宣布呈宇，位于F島的核電站，受9級特大地震影響局雄，放射性物質發(fā)生泄漏甥啄。R本人自食惡果不足惜，卻給世界環(huán)境...
    茶點故事閱讀 39,261評論 3贊 307
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一炬搭、第九天 我趴在偏房一處隱蔽的房頂上張望蜈漓。 院中可真熱鬧，春花似錦宫盔、人聲如沸融虽。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,264評論 0贊 19
  • 一樁弒父案灼芭，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽有额。三九已至，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間巍佑，已是汗流浹背茴迁。 一陣腳步聲響...
    開封第一講書人閱讀 31,486評論 1贊 262
  • 情欲美人皮
    我被黑心中介騙來泰國打工， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留萤衰，地道東北人堕义。 一個月前我還...
    沈念sama閱讀 45,511評論 2贊 354
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長得像脆栋，于是被迫代替她去往敵國和親倦卖。 傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
    茶點故事閱讀 42,802評論 2贊 345

推薦閱讀更多精彩內容

  • 《ijs》速成開發(fā)手冊3.0 官方用戶交流：iApp開發(fā)交流（1） 239547050iApp開發(fā)交流（2） 10...
    葉染柒丶閱讀 5,073評論 0贊 7
  • HTML標簽解釋大全 一筹吐、HTML標記 標簽：!DOCTYPE 說明：指定了 HTML 文檔遵循的文檔類型定義(D...
    米塔塔閱讀 3,225評論 1贊 41
  • 工廠模式類似于現實生活中的工廠可以產生大量相似的商品糖耸，去做同樣的事情秘遏，實現同樣的效果;這時候需要使用工廠模式丘薛。簡單...
    舟漁行舟閱讀 7,718評論 2贊 17
  • 臨摹來自YouTube的draw so cute 教程
    阿梵_莫計盤桓閱讀 281評論 5贊 1
  • 特別無助的時候，我想我真牛逼…
    Ada_YYYYYY閱讀 169評論 0贊 0