Layui图片流加载—手工加载

今天要讲的是一个来自layui插件的功能，图片流加载中的手工加载，当然除了手工加载以外还有滚动加载。这里主要就只讲一下手工加载。图片流加载就像我们浏览网页的时候，滚动条拉到最底的时候，你浏览的内容还没有完，就会有一个加载更多的按钮，你点击就又加载出一部分内容，直到内容全部加载完了，就显示没有更多了。而这里的图片流加载也就是类似那种效果，只是讲内容换成了图片，下面就来看下实例吧。

1、 首先是布局很简单，代码如下图所示：

就是用了一个ul标签来放这些图片，其中的id就是为了下面JS代码匹配到对应的元素，其他什么的就没有了。

2、 下面就直接看JS代码，用到layui插件和代码，就像渲染表格，首先还是要先初始化我们要使用的这个模块，flow模块，初始化完后就是使用了，其中的一些参数可以参照layui文档来写。这里的图片链接是本地的，需要自己去给一有图片的链接才行。详细写法如下图所示：

可以看到图中的代码格式就像渲染表格是差不多的，只是参数不同，其中还多了函数方法，主要就是靠这个方法来实现图片流加载。效果如下图所示：

效果就如上图所示了，可以看到点击加载更多的时候就能再加载一部分图片，等加载完全部后就显示没有更多了。当然这里的加载次数是可以自己设定的，还有一次性记载多少张也可以自己设定的。
以上就是图片流加载的手工加载，对实现一些网页效果还是很有帮助的，可供大家学习参考。