下拉加载瀑布流（横向）

图文以瀑布流（横向）的方式进行渲染绘制

样式部分：

.img_item_li{
    position: absolute;
    width: calc(16.5% - 8px);
    margin: 5px 4px 0 4px;
    padding: 0;
    opacity: 0;
    transition: all .8s;
}

设置opacity，会有一点动画，不设置也可以

逻辑部分：

<script>
    var isFirst = true,
    isDataArrive = true,
    curPage = 1,
    pagesize = 23;
    colHeight = [];
    initResultlist();
    $(window).on('scroll',function(){
        if(!isDataArrive){
            return;
        }
        //判断 'id = result_list_load' 是否进入视野
        if(isVisible($('#result_list_load'))){
            initResultlist();
        }
    })
    // 主流程函数
    function initResultlist(){
        // 执行 getResultlistData 使用 ajax 获取数据
        getResultlistData(function(newList){
            isDataArrive = true;
            if(isFirst){
                var _html = '<li class="first_li img_item_li"><div>固定首个</div></li>';

                $('.result_list').append(_html);
                waterFall($(_html),true);
            }

            $.each(newList,function(index,news){
                // 拿到的数据进行 DOM 拼接
                var $node = getNode(news)
                $node.find('img').on('load',function(){
                    $('.result_list').append($node)
                    // 进行瀑布流布局
                    waterFall($node);
                })
            })
        })
        // 即获取并添加之后，修改数据状态
        isDataArrive = false
    }
    // 执行搜索条件，重新执行
    function searchResultlist(){
        $(".result_list").html("");
        $("#result_list_load").html("点击或者下拉加载更多");
        isFirst = true;
        isDataArrive = true;
        curPage = 1;
        colHeight = [];
        initResultlist();
    }
    function getResultlistData(callback){
        if(curPage == 1){
            $(".result_list_noresult").addClass("hide");
            $(".result_list").addClass("hide");
            $(".result_list_loading").removeClass("hide");
        }
        $.ajax({
            url: "url",
            type: "post",
            dataType: "json",
            data: {},
            success: function (res) {
                if (res.error == 0) {
                    var _result = res.data;
                    var _html = '';

                    if(curPage == 1){
                        if(_result.length < 1){
                            $(".result_list").addClass("hide");
                        }else{
                        //loading---结果出后，文字提示是：点击或者下拉加载更多
                            $(".result_list").removeClass("hide");
                            callback(_result);
                            curPage++;
                        }
                        if(_result.length < pagesize){
                            //loading---结果出后，因为不足一页，文字提示是：到底啦
                        }
                    }else{
                        if(_result.length < 1){
                            //loading---结果出后，result，文字提示是：到底啦
                        }else{
                            callback(_result);
                            curPage++;
                        }
                    }
                } else {
                }
            }
        });
    }
    // DOM 拼接
    function getNode(data){
        var _itemHtml = '';        
        _itemHtml += '<li class="img_item_li">';
        _itemHtml += '<div class="img_item_block"><img class="item_img" src="'+data["img_id"]+'"/></div>';
        _itemHtml += '<div class="item_title">'+data["name"]+'</div>';
        _itemHtml += '</li>';

        return $(_itemHtml)
    }
    function waterFall($node,isaddNode=false){
        var nodeWidth = $('.img_item_li').outerWidth(true)

        // 首次调用的时候
        if(isFirst){
            var colNum = parseInt($('.result_list').width()/$('.img_item_li').outerWidth(true));
            for(var i = 0; i < colNum ; i++){
                colHeight[i] = 0
            }
            isFirst = false
        }
        var index = 0,
        minSumHeight = colHeight[0];

        for(var i = 0; i < colHeight.length ; i++){
            if(colHeight[i] < minSumHeight){
                index = i
                minSumHeight = colHeight[i]
            }
        }
        //节点的位置
        $node.css({
            left: nodeWidth * index,
            top: minSumHeight,
            opacity: 1
        })
        if(isaddNode){
            $(".first_li").height(nodeWidth * 0.689 +'px');
            colHeight[index] = nodeWidth * 0.689 + minSumHeight;
        }else{
            colHeight[index] = $node.outerHeight(true) + minSumHeight
        }
        $('.result_list').height(Math.max.apply(Math,colHeight))
    }
</script>

 存在bug:

1)更改浏览器窗口大小时，页面没有重新渲染，会出现图片错位的情况

2）在首次访问时，图片展示顺序会出现错位的情况，这与图片load速度有关