瀑布流

不能滑动取图片

可以滑动取图

代码：

<div class="zhong">
    <div class="it"></div>
    <div class="it"></div>
    <div class="it"></div>
    <div class="it"></div>
</div>
<script src="/static/jquery-3.1.1.js"></script>
<script>
 $(function () {
     var obj = new ScrollImg();
     obj.fetchImg();
     obj.scrollEvent();
    });
    function ScrollImg() {
        this.NID = 0;
        this.LASTPOSITION = 3;
        this.fetchImg = function () {
            var that = this;
            $.ajax({
                url:'get_imgs.html',
                type:'GET',
                data:{nid:that.NID},
                dataType:'JSON',
                success:function (arg) {
                    var img_list = arg.data;
                    $.each(img_list,function (index,v) {
                        var eqv = (index + that.LASTPOSITION + 1)% 4;
                        var tag = document.createElement('img');
                        tag.src = v.src;
                        $('.zhong').children().eq(eqv).append(tag);
                        if (index + 1 == img_list.length){
                            that.LASTPOSITION = eqv;
                            that.NID = v.nid;
                        }
                    })
                }
            })
        }
        this.scrollEvent = function () {
            var that = this;
            $(window).scroll(function () {
                var scropllTop = $(window).scrollTop();
                var winHeignt = $(window).height();
                var docHeignt = $(document).height();
                if (scropllTop + winHeignt == docHeignt){
                    that.fetchImg();
                }
            })
        }

    }