JS瀑布流無限加載！

關於瀑布流的原理我就不詳細說明了，在上面的文章中有，或者你們能夠去看大漠老師的文章，講的很詳細，今天咱們主要是動手作一個瀑布流~

說明：本文效果是無限加載的，意思就是你一直滾動就會一直加載圖片出現，而不是說，加載幾張就停了，若是須要加載幾張就中止的，能夠去看看下面的文章

原生JAVASCRIPT AJAX點擊加載更多–（獲取評論列表）

看完這個應該就明白怎麼加載額定的數目後中止，可是值得注意的就是瀑布流，若是你不是無限加載，由於圖片高度不同，圖片是頂部對齊的，因此底部就會出現留白的現象，以下所示：

至於底部留白美觀問題，就見仁見智了！

html結構：

<div id="main">
    <div class="pin">
        <div class="box">
            <img src="./images/1.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/2.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/3.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/4.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/5.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/6.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/7.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/8.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/9.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/10.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/11.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/12.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/13.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/14.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/15.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/16.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/17.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/18.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/19.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/20.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/21.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/1.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/2.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/3.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/4.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/5.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/6.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/7.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/8.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/9.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/10.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/11.jpg"/>
        </div>
    </div>
</div>

　　

因爲本文不涉及ajax，因此最開始的結構是寫死了的，若是是真實項目結構就是這樣的

<div id="main">
//ajax獲取
</div>

　　

分析原理：
一、最開始的時候頁面中必須得有一些圖片，就像這樣的

仔細看底部，這是沒有滾動的時候，我寫死在html結構中的圖片（有留白）

可是這些圖片的位置包括大小，只有第一排的圖片是本身經過css寫死的，好比浮動呀，好比定位啊（我這裏是浮動）到此第一排圖片搞定

二、搞定後，就是第二排的圖片怎麼去排呢，接下來經過JS計算第一排圖片的高度，找出最矮的那張圖片，而後把第二排圖片的第一張排在這張最矮圖片下面去~而後如此一直找下去。

三、搞定位置後，在滾動的時候去讓圖片一直加載。

演示：
演示Demo
（注：github你懂得，速度會有點慢，打開的時候js加載沒那麼快完成，因此會有一些問題，你們看的時候稍微等一下就行了。）

fakin前端博客-設計路上的前端日記