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; width: 32%;float:left; border: none;'+styleO+'">'
                                + ' <div class="layui-upload-list">'
                                + '  <div class="layui-upload-img" style=" height: 200px;" ></div>'
                                +'<div >\n' +
                                '           <div >\n' +
                                '                <input type="text" class="layui-input" style="text-align: center;padding: 0px;border: none;color: darkgray;" disabled/>\n' +
                                '           </div>\n' +
                                '           <div >\n' +
                                '                  <textarea class="layui-textarea" style="resize: none;border: none;text-align: center;" id="description" name="description" lay-verify="newMaxLength" disabled></textarea>\n' +
                                '           </div>\n' +
                                ' </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; width: 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 >\n' +
                            '           <div >\n' +
                            '                <input value="'+photoType+'" type="text" class="layui-input" style="text-align: center;padding: 0px;border: none;color: darkgray;" disabled/>\n' +
                            '           </div>\n' +
                            '           <div >\n' +
                            '                  <textarea class="layui-textarea" style="resize: none;border: none;text-align: center;" id="description" name="description" lay-verify="newMaxLength" disabled>'+text+'</textarea>\n' +
                            '           </div>\n' +
                            ' </div>'
                            + ' </div> ' +
                            '</fieldset>' +
                            '</div>'
                        lis.push(html);
                    }
                    var totalPage= Math.ceil(result.length/pageSize);
                    next(lis.join(''), page < totalPage); //假設總頁數為 totalPage
                }, 500);
            }
        });
    }

 最后的結果就是：

 

 最后就是

 

 

 

 

 

 

 

 

 

 

 

@