init

2024-10-29 14:04:59 +08:00
commit 48bf3e6f33
2839 changed files with 762707 additions and 0 deletions
--- a/public/frontend/layui-main/examples/flow.html
+++ b/public/frontend/layui-main/examples/flow.html
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+<title>流加载 - layui</title>
+
+<link rel="stylesheet" href="../src/css/layui.css">
+
+<style>
+body{padding: 15px;}
+.flow-default{ font-size: 0;}
+.flow-default li{display: inline-block; margin-right: 10px; font-size: 14px; width: 48%;  margin-bottom: 10px; height: 200px; line-height: 200px; text-align: center; background-color: #eee;}
+img{width: 500px; height: 300px;}
+.flow-default img{width: 100%; height: 100%;}
+</style>
+</head>
+<body>
+
+
+<ul class="flow-default" id="test1"></ul>
+
+<div class="layui-hide">
+  <ul class="flow-default" id="test2"></ul>
+</div>
+
+
+<div class="demo" style="height: 300px; overflow: auto;">
+  <img src="https://sentsin.gitee.io/res/images/demo/loading.gif" lay-src="https://sentsin.gitee.io/res/images/demo/layer.png">
+  <img src="https://sentsin.gitee.io/res/images/demo/loading.gif" lay-src="https://sentsin.gitee.io/res/images/demo/layer.png">
+  <img src="https://sentsin.gitee.io/res/images/demo/loading.gif" lay-src="https://sentsin.gitee.io/res/images/demo/error.png">
+  <img src="https://sentsin.gitee.io/res/images/demo/loading.gif" lay-src="https://sentsin.gitee.io/res/images/demo/layer.png">
+  <img src="https://sentsin.gitee.io/res/images/demo/loading.gif" lay-src="https://sentsin.gitee.io/res/images/demo/layer.png">
+  <img src="https://sentsin.gitee.io/res/images/demo/loading.gif" lay-src="https://sentsin.gitee.io/res/images/demo/layer.png">
+  <img src="https://sentsin.gitee.io/res/images/demo/loading.gif" lay-src="https://sentsin.gitee.io/res/images/demo/layer.png">
+  <img src="https://sentsin.gitee.io/res/images/demo/loading.gif" lay-src="https://sentsin.gitee.io/res/images/demo/layer.png">
+  <img src="https://sentsin.gitee.io/res/images/demo/loading.gif" lay-src="https://sentsin.gitee.io/res/images/demo/layer.png">
+  <img src="https://sentsin.gitee.io/res/images/demo/loading.gif" lay-src="https://sentsin.gitee.io/res/images/demo/layer.png">
+</div>
+
+
+<script src="../src/layui.js"></script>
+<script>
+layui.use('flow', function(){
+  var flow = layui.flow;
+
+  flow.load({
+    elem: '#test1' //流加载容器
+    //,scrollElem: '.flow-default' //滚动条所在元素，默认document
+    //,isAuto: false
+    //,end: '没了'
+    ,isLazyimg: true
+    ,done: function(page, next){ //加载下一页
+      console.log('done:', page)
+      setTimeout(function(){
+        var lis = [];
+        for(var i = 0; i < 6; i++){
+          lis.push('<li><img lay-src="https://sentsin.gitee.io/res/images/demo/layer.png?v='+ (page+i) +'"></li>')
+        }
+        next(lis.join(''), page < 3);
+      }, 500);
+    }
+  });
+  
+  flow.load({
+    elem: '#test2' //流加载容器
+    //,scrollElem: '.flow-default' //滚动条所在元素，默认document
+    //,isAuto: false
+    //,end: '没了'
+    ,isLazyimg: true
+    ,done: function(page, next){ //加载下一页
+      setTimeout(function(){
+        var lis = [];
+        for(var i = 0; i < 6; i++){
+          lis.push('<li><img lay-src="https://sentsin.gitee.io/res/images/demo/layer.png?v='+ (page+i) +'"></li>')
+        }
+        next(lis.join(''), page < 3);
+      }, 500);
+    }
+  });
+  
+  //按屏加载图片
+  flow.lazyimg({
+    elem: '.demo img'
+    ,scrollElem: '.demo'
+  });
+  
+});
+</script>
+
+</body>
+</html>