layui 学习笔记(六) 流加载

流加载

html：

<ul class="flow-default" style="height: 300px;" id="LAY_demo2"></ul>

js：

调用：

showFlow(3,resultData);

方法：

function showFlow (pageSize,result){
        var styleO='text-align: center;';// 这里现在没什么用了
        flow.load({
            elem: '#LAY_demo2' //流加载容器
            ,scrollElem: '#LAY_demo2' //滚动条所在元素，一般不用填，此处只是演示需要。
            ,isAuto: false
            ,isLazyimg: true
            ,done: function(page, next){ //加载下一页
                //模拟插入
                setTimeout(function(){
                    var lis = [];
                    for(var i = 0; i < pageSize; i++){
                        var index =(page-1)*pageSize + i ;
　　　　　　　　　　　　　　 // 这里可以或略 主要是为了让最后一行 “没有更多了” 这句话顶下来独占一行
                        if(index==result.length){
                            // 空div 用来占位
                            var html = ' <div class="layui-upload" id="div'+index+'">'
                                + ' <fieldset class="layui-elem-field " style="padding : 5px;  32%;float:left; border: none;'+styleO+'">'
                                + ' <div class="layui-upload-list">'
                                + '  <div class="layui-upload-img" style=" height: 200px;" ></div>'
                                +'<div >
' +
                                '           <div >
' +
                                '                <input type="text" class="layui-input" style="text-align: center;padding: 0px;border: none;color: darkgray;" disabled/>
' +
                                '           </div>
' +
                                '           <div >
' +
                                '                  <textarea class="layui-textarea" style="resize: none;border: none;text-align: center;" id="description" name="description" lay-verify="newMaxLength" disabled></textarea>
' +
                                '           </div>
' +
                                ' </div>'

                                + ' </div> ' +
                                '</fieldset>' +
                                '</div>'
                            if(index%3==1){// 这里是因为我的弹窗 一行只显示三个图 。最后一行“没有更多了”总跑偏 。想让他显示在最下面居中显示所以放了一个空图占位 。。 或许有更好的方法
                                lis.push(html);
                                lis.push(html);
                            }else if(index%3==2){
                                lis.push(html);
                            }

                            //$(".layui-flow-more").hide(); 这是没有更多了那个字也可以隐藏
                            break;
                        }
                        var pic = result[index].photoAddress;
                        var text = result[index].photoDescription;
                        var photoType = result[index].photoType;
　　　　　　　　　　　　　　 // 这里换成自己的div
                        var html = ' <div class="layui-upload" id="div'+index+'">'
                            + ' <fieldset class="layui-elem-field " style="padding : 5px;  32%;float:left; border: none;'+styleO+'">'
                            + ' <div class="layui-upload-list">'
                            + '  <img class="layui-upload-img" onclick="basePic.showNatrualPic(this)" src="'+Feng.ctxPath +'/highTemperatureTi/showImg?fileUrl='+pic+'" >'
                            +'<div >
' +
                            '           <div >
' +
                            '                <input value="'+photoType+'" type="text" class="layui-input" style="text-align: center;padding: 0px;border: none;color: darkgray;" disabled/>
' +
                            '           </div>
' +
                            '           <div >
' +
                            '                  <textarea class="layui-textarea" style="resize: none;border: none;text-align: center;" id="description" name="description" lay-verify="newMaxLength" disabled>'+text+'</textarea>
' +
                            '           </div>
' +
                            ' </div>'
                            + ' </div> ' +
                            '</fieldset>' +
                            '</div>'
                        lis.push(html);
                    }
                    var totalPage= Math.ceil(result.length/pageSize);
                    next(lis.join(''), page < totalPage); //假设总页数为 totalPage
                }, 500);
            }
        });
    }

 最后的结果就是：

 最后就是

 

@