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

来源：https://www.cnblogs.com/fakin/p/7814586.html