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前端博客-设计路上的前端日记