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>

　　

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

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

但是這些圖片的位置包括大小，只有第一排的圖片是自己通過css寫死的，比如浮動呀，比如定位啊（我這里是浮動）到此第一排圖片搞定

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

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

演示：
演示Demo
（注：github你懂得，速度會有點慢，打開的時候js加載沒那么快完成，所以會有一些問題，大家看的時候稍微等一下就好了。）

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